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

{% block title %}{% trans action %} {{ branch }}{% endblock %}

{% block tabs %}
  <ul class="nav nav-tabs">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="action-form-tab" data-bs-toggle="tab" data-bs-target="#action-form" type="button" role="tab" aria-controls="merge-form" aria-selected="true">
        {% trans action %}
      </button>
    </li>
  </ul>
{% endblock tabs %}

{% block content %}
  {# Form tab #}
  <div class="tab-pane show active" id="action-form" role="tabpanel" aria-labelledby="action-form-tab">
    {% if not action_permitted %}
      <div class="alert alert-warning">
        <i class="mdi mdi-alert-circle"></i>
        {{ action_permitted.message }}
        {% blocktrans %}Only dry runs are permitted.{% endblocktrans %}
      </div>
    {% endif %}
    {% if conflicts_table.rows %}
      <div class="alert alert-danger">
        <i class="mdi mdi-alert-circle"></i>
        {% blocktrans with count=conflicts_table.rows|length %}
          The following {{ count }} conflicts were found. Applying these changes will overwrite data that has
          been modified since the branch was created. Please confirm that each of these changes is desired.
        {% endblocktrans %}
      </div>
    {% else %}
      <div class="alert alert-success">
        <i class="mdi mdi-check-circle"></i>
        {% trans "No conflicts found." %}
      </div>
    {% endif %}
    {% if changes_summary.creates or changes_summary.updates or changes_summary.deletes %}
      <div class="card mb-3">
        <div class="card-header">
          <strong>{% trans "Pending Changes" %}</strong>
        </div>
        <div class="card-body p-0">
          <div class="list-group list-group-flush">
            {% if changes_summary.creates %}
              <div class="list-group-item">
                <a class="d-flex justify-content-between align-items-center text-decoration-none text-body"
                   data-bs-toggle="collapse" href="#{{ action_name }}-creates" role="button" aria-expanded="false" aria-controls="{{ action_name }}-creates">
                  <span>{% trans "Creates" %}</span>
                  <span class="badge bg-success rounded-pill text-white">{{ changes_summary.creates_total }}</span>
                </a>
                <div class="collapse" id="{{ action_name }}-creates">
                  <table class="table table-hover table-borderless mb-0">
                    <tbody>
                      {% for ct, count in changes_summary.creates.items %}
                        <tr>
                          <td>{{ ct.model_class|meta:"verbose_name_plural"|bettertitle }}</td>
                          <td class="text-end">{{ count }}</td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            {% endif %}
            {% if changes_summary.updates %}
              <div class="list-group-item">
                <a class="d-flex justify-content-between align-items-center text-decoration-none text-body"
                   data-bs-toggle="collapse" href="#{{ action_name }}-updates" role="button" aria-expanded="false" aria-controls="{{ action_name }}-updates">
                  <span>{% trans "Updates" %}</span>
                  <span class="badge bg-primary rounded-pill text-white">{{ changes_summary.updates_total }}</span>
                </a>
                <div class="collapse" id="{{ action_name }}-updates">
                  <table class="table table-hover table-borderless mb-0">
                    <tbody>
                      {% for ct, count in changes_summary.updates.items %}
                        <tr>
                          <td>{{ ct.model_class|meta:"verbose_name_plural"|bettertitle }}</td>
                          <td class="text-end">{{ count }}</td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            {% endif %}
            {% if changes_summary.deletes %}
              <div class="list-group-item">
                <a class="d-flex justify-content-between align-items-center text-decoration-none text-body"
                   data-bs-toggle="collapse" href="#{{ action_name }}-deletes" role="button" aria-expanded="false" aria-controls="{{ action_name }}-deletes">
                  <span>{% trans "Deletes" %}</span>
                  <span class="badge bg-danger rounded-pill text-white">{{ changes_summary.deletes_total }}</span>
                </a>
                <div class="collapse" id="{{ action_name }}-deletes">
                  <table class="table table-hover table-borderless mb-0">
                    <tbody>
                      {% for ct, count in changes_summary.deletes.items %}
                        <tr>
                          <td>{{ ct.model_class|meta:"verbose_name_plural"|bettertitle }}</td>
                          <td class="text-end">{{ count }}</td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    {% endif %}
    <form action="" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      {% if conflicts_table.rows %}
        <div class="card">
          <div class="htmx-container table-responsive" id="object_list">
            {% include 'htmx/table.html' with table=conflicts_table %}
          </div>
        </div>
      {% endif %}
      <div class="row">
        <div class="col col-6 offset-3">
          {% render_form form %}
          <div class="text-center my-3">
            <a href="{{ branch.get_absolute_url }}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
            <button type="submit" name="_update" class="btn btn-primary">
              {% trans action %}
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
  {# /Form tab #}
{% endblock content %}