{% extends "base.html" %}

{% set staff_repo_subnav_active = "protections" %}
{% block content %}
  <div class="row g-4">
    <div class="col-12 col-lg-3">
      <div class="card shadow-sm mb-3">
        {% with staff_nav_active="repos" %}
          {% include "partials/staff_sidebar.html" %}
        {% endwith %}
      </div>
    </div>
    <div class="col-12 col-lg-9">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
          {% with breadcrumbs=[
            {"name": "Staff", "href": "/staff"},
            {"name": "Repos", "href": "/staff/repos"},
            {"name": repo.name, "href": "/staff/repos/" ~ repo.uuid},
            {"name": "Protections", "href": "/staff/repos/" ~ repo.uuid ~ "/protections"},
            {"name": form.branch_pattern if form.branch_pattern else "New"}
          ] %}
            {% include "partials/breadcrumbs.html" %}
          {% endwith %}
        </div>
      </div>
      {% include "staff/repo_subnav.html" %}
      {% include "partials/flash.html" %}
      <div class="row g-3">
        <div class="col-12 col-lg-8">
          <div class="card shadow-sm">
            <div class="card-body">
              <div class="text-uppercase text-muted small fw-semibold mb-2">
                {% if is_new %}New Branch Protection{% else %}Edit Branch Protection{% endif %}
              </div>
              <form method="post" action="{{ form_action }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <div class="row g-3">
                  <div class="col-12">
                    <label class="form-label" for="branch-pattern">Branch Pattern</label>
                    <input type="text" class="form-control" id="branch-pattern" name="branch_pattern" value="{{ form.branch_pattern }}" placeholder="main" required>
                    <div class="form-text">Glob pattern matching branch names. Use <code>*</code> as a wildcard (for example <code>release/*</code>).</div>
                  </div>
                  <div class="col-12">
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" id="require-pull" name="require_pull" value="true" {% if form.require_pull %}checked{% endif %} data-toggle-target="#require-num-approvals-group">
                      <label class="form-check-label" for="require-pull">Require pull request</label>
                    </div>
                    <div class="form-text">Pushes to matching branches must go through a pull request.</div>
                  </div>
                  <div class="col-12 col-md-6" id="require-num-approvals-group">
                    <label class="form-label" for="require-num-approvals">Required approvals</label>
                    <input type="number" class="form-control" id="require-num-approvals" name="require_num_approvals" value="{{ form.require_num_approvals | default(0) }}" min="0" {% if not form.require_pull %}disabled{% endif %}>
                    <div class="form-text">Number of approvals required before merge. 0 disables approval requirements.</div>
                  </div>
                  <div class="col-12">
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" id="require-pull-single-commit" name="require_pull_single_commit" value="true" {% if form.require_pull_single_commit %}checked{% endif %}>
                      <label class="form-check-label" for="require-pull-single-commit">Require single commit</label>
                    </div>
                    <div class="form-text">Pull requests must contain exactly one commit.</div>
                  </div>
                  <div class="col-12">
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" id="require-fastforward" name="require_fastforward" value="true" {% if form.require_fastforward %}checked{% endif %}>
                      <label class="form-check-label" for="require-fastforward">Require fast-forward</label>
                    </div>
                    <div class="form-text">Merges must be fast-forward only.</div>
                  </div>
                  <div class="col-12">
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" id="require-owner-merge" name="require_owner_merge" value="true" {% if form.require_owner_merge %}checked{% endif %}>
                      <label class="form-check-label" for="require-owner-merge">Require owner merge</label>
                    </div>
                    <div class="form-text">Only the effective repo owner can merge.</div>
                  </div>
                  <div class="col-12">
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" id="allow-owner-bypass" name="allow_owner_bypass" value="true" {% if form.allow_owner_bypass %}checked{% endif %}>
                      <label class="form-check-label" for="allow-owner-bypass">Allow owner bypass</label>
                    </div>
                    <div class="form-text">Allow the repo owner (creator or team owner) to bypass approvals, single-commit, fast-forward, and owner-merge checks.</div>
                  </div>
                </div>
                <div class="mt-4 d-flex gap-2">
                  <button class="btn btn-primary" type="submit">{% if is_new %}Create Protection{% else %}Save Changes{% endif %}</button>
                  <a class="btn btn-outline-secondary" href="/staff/repos/{{ repo.uuid }}/protections">Cancel</a>
                </div>
              </form>
            </div>
          </div>

          {% if not is_new %}
            <div class="card shadow-sm mt-3">
              <div class="card-header d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center justify-content-between gap-2">
                <span class="fw-semibold">Trusted Approvers</span>
              </div>
              <div class="card-body">
                <form method="post" action="/staff/repos/{{ repo.uuid }}/protections/{{ protection.uuid }}/approvers" class="row g-2 align-items-end mb-3">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                  <div class="col-12 col-md-8">
                    <label class="form-label" for="approver-user-ref">Add approver</label>
                    <input type="text" class="form-control" id="approver-user-ref" name="user_ref" placeholder="Username, email, or UUID" required>
                    <div class="form-text">
                      {% if team %}
                        {% if team_members | length > 0 %}
                          Quick add:
                          {% for member in team_members %}
                            <button class="btn btn-link btn-sm p-0 text-decoration-none" type="button" data-fill-member="{{ member.username }}">{{ member.username }}</button>{% if not loop.last %}, {% endif %}
                          {% endfor %}
                        {% else %}
                          Approvers for team repos must be active team members.
                        {% endif %}
                      {% else %}
                        Any active user can be added as an approver for personal repos.
                      {% endif %}
                    </div>
                  </div>
                  <div class="col-12 col-md-4">
                    <button class="btn btn-primary w-100" type="submit">Add Approver</button>
                  </div>
                </form>

                {% if approvers | length == 0 %}
                  <p class="text-muted mb-0">No trusted approvers configured.</p>
                {% else %}
                  <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                      <thead>
                        <tr>
                          <th>User</th>
                          <th class="text-end">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for approver in approvers %}
                          <tr>
                            <td>
                              {% with user_link_href = "/" ~ approver.username, user_link_username = approver.username, user_link_label = approver.username, user_link_class = "text-decoration-none" %}
                                {% include "partials/hover_card_user_link.html" %}
                              {% endwith %}
                            </td>
                            <td class="text-end">
                              <form method="post" action="/staff/repos/{{ repo.uuid }}/protections/{{ protection.uuid }}/approvers/{{ approver.uuid }}/delete" data-confirm-modal="confirm-remove-approver" data-confirm-name="{{ approver.username }}">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                <button class="btn btn-sm btn-outline-danger" type="submit">Remove</button>
                              </form>
                            </td>
                          </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                {% endif %}
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% with
    modal_id="confirm-remove-approver",
    modal_title="Remove approver",
    modal_body='Remove <span class="fw-semibold" data-confirm-name></span> from trusted approvers?',
    modal_confirm_text="Remove approver",
    modal_desc="This user will no longer satisfy the trusted approver requirement."
  %}
    {% include "partials/confirm_modal.html" %}
  {% endwith %}
{% endblock %}

{% block scripts %}
  <script>
    PearingScripts.initFillMemberButtons("#approver-user-ref");
    $(function () {
      $("[data-toggle-target]").each(function () {
        var $checkbox = $(this);
        var $target = $($checkbox.data("toggle-target"));
        function sync() {
          $target.find("input, select, textarea").prop("disabled", !$checkbox.prop("checked"));
        }
        sync();
        $checkbox.on("change", sync);
      });
    });
  </script>
{% endblock %}