{% extends 'generic/_base.html' %}
{% load helpers %}
{% load i18n %}

{% comment %}
Context:
  - object:       The device
  - plan:         diff.SyncPlan
  - form:         forms.DeviceSyncForm
  - errors:       Error messages from a failed apply
  - device_rows:  (DeviceFieldDiff, bound checkbox) pairs
  - kinds:        {'diff': KindDiff, 'summaries': [(PropertySummary, bound checkbox)]} for changed component types
  - return_url:   The device page
{% endcomment %}

{% block title %}{% trans "Sync with device type" %}{% endblock %}

{% block page-header %}
  <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mt-2">
      <ol class="breadcrumb" aria-label="breadcrumbs">
        <li class="breadcrumb-item"><a href="{% url 'dcim:device_list' %}">{% trans "Devices" %}</a></li>
        <li class="breadcrumb-item">{{ object|linkify }}</li>
      </ol>
    </div>
  </div>
  {{ block.super }}
{% endblock page-header %}

{% block subtitle %}
  <div class="text-secondary fs-5">
    <ul class="list-inline">
      <li class="list-inline-item">
        <i class="mdi mdi-server" title="{% trans "Device" %}"></i> {{ object|linkify }}
      </li>
      <li class="list-inline-item">
        <i class="mdi mdi-chip" title="{% trans "Device type" %}"></i> {{ plan.device_type|linkify }}
      </li>
    </ul>
  </div>
{% endblock subtitle %}

{% block content %}
  {% if errors %}
    <div class="alert alert-danger mt-3" role="alert">
      <h4 class="alert-title">{% trans "Nothing was changed. Fix these errors and try again:" %}</h4>
      <ul class="mb-0">
        {% for error in errors %}
          <li>{{ error }}</li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}

  {% if plan.is_empty %}
    <div class="row mt-3">
      <div class="col col-md-8 offset-md-2">
        <div class="card">
          <div class="card-body text-center py-5">
            <i class="mdi mdi-check-circle-outline text-success" style="font-size: 3rem;"></i>
            <h3 class="mt-2">{% trans "The device is in sync with its device type" %}</h3>
            <p class="text-secondary mb-4">
              {% blocktrans trimmed with device_type=plan.device_type %}
                Every component of {{ device_type }} exists on the device, and their properties match.
              {% endblocktrans %}
            </p>
            <a href="{{ return_url }}" class="btn btn-outline-secondary">{% trans "Back to device" %}</a>
          </div>
        </div>
      </div>
    </div>
  {% else %}
    <form action="" method="post" class="object-edit--with-sticky-actions">
      {% csrf_token %}

      <div class="row mt-3">
        <div class="col col-lg-10 offset-lg-1">

          <p class="text-secondary">
            {% blocktrans trimmed %}
              A checked property is copied from the device type to every component of that type with the same
              name. An unchecked property keeps the value of the device. Components that are missing on the
              device are always created. Cables, IP addresses, VLANs, descriptions and other settings of the
              components are not changed.
            {% endblocktrans %}
          </p>

          {# Device fields #}
          {% if device_rows %}
            <div class="card">
              <h2 class="card-header">{% trans "Device" %}</h2>
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th class="w-1"></th>
                    <th>{% trans "Property" %}</th>
                    <th>{% trans "Device" %}</th>
                    <th>{% trans "Device type" %}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for diff, field in device_rows %}
                    <tr>
                      <td>{{ field }}</td>
                      <td><label for="{{ field.id_for_label }}" class="mb-0">{{ diff.label }}</label></td>
                      <td class="text-secondary">{{ diff.current }}</td>
                      <td>{{ diff.desired }}</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% endif %}

          {# Component types #}
          {% for kind in kinds %}
            {% with diff=kind.diff %}
              <div class="card">
                <h2 class="card-header">
                  {{ diff.kind.verbose_name_plural }}
                  <div class="card-actions">
                    {% if diff.create %}
                      <span class="badge text-bg-success">
                        {% blocktrans trimmed count counter=diff.create|length %}
                          {{ counter }} to create
                        {% plural %}
                          {{ counter }} to create
                        {% endblocktrans %}
                      </span>
                    {% endif %}
                    {% if diff.update %}
                      <span class="badge text-bg-warning">
                        {% blocktrans trimmed count counter=diff.update|length %}
                          {{ counter }} with differences
                        {% plural %}
                          {{ counter }} with differences
                        {% endblocktrans %}
                      </span>
                    {% endif %}
                  </div>
                </h2>

                {% if diff.create or diff.conflicts %}
                  <div class="card-body">
                    {% if diff.create %}
                      <details>
                        <summary>
                          <i class="mdi mdi-plus-circle text-success"></i>
                          {% blocktrans trimmed count counter=diff.create|length with kind=diff.kind.verbose_name|lower kinds=diff.kind.verbose_name_plural|lower %}
                            {{ counter }} {{ kind }} will be created
                          {% plural %}
                            {{ counter }} {{ kinds }} will be created
                          {% endblocktrans %}
                        </summary>
                        <div class="mt-2">
                          {% for item in diff.create %}
                            <span class="badge text-bg-light me-1 mb-1">{{ item.name }}</span>
                          {% endfor %}
                        </div>
                      </details>
                    {% endif %}
                    {% if diff.conflicts %}
                      <div class="alert alert-warning mt-3 mb-0" role="alert">
                        <i class="mdi mdi-alert"></i>
                        {% trans "Not created: the name is used by a component of an installed module:" %}
                        {% for item in diff.conflicts %}
                          <strong>{{ item.name }}</strong>{% if not forloop.last %}, {% endif %}
                        {% endfor %}
                      </div>
                    {% endif %}
                  </div>
                {% endif %}

                {% if kind.summaries %}
                  <table class="table table-hover">
                    <thead>
                      <tr>
                        <th class="w-1"></th>
                        <th>{% trans "Property" %}</th>
                        <th>{% trans "Differs on" %}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for summary, field in kind.summaries %}
                        <tr>
                          <td>{{ field }}</td>
                          <td class="w-25"><label for="{{ field.id_for_label }}" class="mb-0">{{ summary.label }}</label></td>
                          <td>
                            <details>
                              <summary class="text-secondary">
                                {% blocktrans trimmed count counter=summary.count with kind=diff.kind.verbose_name|lower kinds=diff.kind.verbose_name_plural|lower %}
                                  {{ counter }} {{ kind }}
                                {% plural %}
                                  {{ counter }} {{ kinds }}
                                {% endblocktrans %}
                              </summary>
                              <table class="table table-sm mt-2 mb-0">
                                <thead>
                                  <tr>
                                    <th>{% trans "Name" %}</th>
                                    <th>{% trans "Device" %}</th>
                                    <th>{% trans "Device type" %}</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {% for name, change in summary.components %}
                                    <tr>
                                      <td>{{ name }}</td>
                                      <td class="text-secondary">{{ change.current }}</td>
                                      <td>{{ change.desired }}</td>
                                    </tr>
                                  {% endfor %}
                                </tbody>
                              </table>
                            </details>
                          </td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                {% endif %}
              </div>
            {% endwith %}
          {% endfor %}

        </div>
      </div>

      <div class="sticky-actions sticky-actions-footer d-print-none" data-sticky-position="full" data-sticky-when="always">
        <div class="btn-list">
          <a href="{{ return_url }}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
          <button type="submit" class="btn btn-primary">
            <i class="mdi mdi-sync"></i> {% trans "Apply" %}
          </button>
        </div>
      </div>
    </form>
  {% endif %}
{% endblock content %}