{% extends 'base.html' %}
{% load helpers %}

{% block title %}Reapply {{ device.device_type.name }} to {{ device.name }}?{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-danger">
                <div class="panel-heading"><strong>Confirm Update</strong></div>
                <div class="panel-body">
                    <p><strong>Warning:</strong> The following operation will mutate {{ device.name }}. Please carefully review the components to be added and deleted and confirm below.</p>
                    {% block message_extra %}{% endblock %}
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
              <div class="panel-body">
                <ul>
                  {% for name, actions in mutations.items %}
                    {% if actions.add %}
                      <li>{{ actions.add|length }} <b>{{ name }}s</b> will be <b>added</b>:
                        <span>{{ actions.add|join:', ' }}</span>
                      </li>
                    {% endif %}
                    {% if actions.edits %}
                      <li>{{ actions.edits|length }} <b>{{ name }}s</b> will be <b>edited</b>:
                        <span>
                          {% for name, edits in actions.edits.items %}
                            {{ name }} (fields: {{edits|join:' ,'}}){% if not forloop.last %}, {% endif %}
                          {% endfor %}
                        </span>
                      </li>
                    {% endif %}
                    {% if actions.delete %}
                      <li>{{ actions.delete|length }} <b>{{ name }}s</b> will be <b>deleted</b>:
                        <span>{{ actions.delete|join:', ' }}</span>
                      </li>
                    {% endif %}
                  {% endfor %}
                </ul>
              </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="" method="post" class="form">
                {% csrf_token %}
                {% for field in form.hidden_fields %}
                    {{ field }}
                {% endfor %}
                <div class="text-center">
                    <button type="submit" name="_confirm" class="btn btn-danger">Update</button>
                    <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
                </div>
            </form>
        </div>
    </div>
{% endblock %}