{% extends "base.html" %}

{% block content %}
  <div class="d-flex flex-column gap-3">
    <div class="d-flex flex-column gap-2">
      {% include "partials/repo_heading.html" %}
      {% with
        breadcrumbs=[
          {"name": owner_name, "href": owner_path},
          {"name": repo.name, "href": repo_path},
          {"name": "Fork"}
        ],
        nav_class="d-inline-block align-self-start"
      %}
        {% include "partials/breadcrumbs.html" %}
      {% endwith %}
    </div>
    {% include "partials/flash.html" %}
    {% if fork_disabled %}
      <div class="alert alert-danger" role="alert">
        There are no available destinations for this fork.
        <a class="d-block" href="{{ repo_path }}">Go back</a>
      </div>
    {% endif %}

    <div class="row g-3">
      <div class="col-12 col-lg-6">
        <div class="card shadow-sm">
          <div class="card-body">
            <h2 class="h5 mb-1">Fork this repository</h2>
            <p class="text-muted mb-4">Choose where to create the fork and confirm the URL slug.</p>
            <form method="post" action="{{ repo_path }}/fork"{% if fork_disabled %} class="opacity-75"{% endif %}>
              <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
              <input type="hidden" name="next" value="{{ form.next }}">
              <fieldset {% if fork_disabled %}disabled{% endif %}>
                <div class="row g-3">
                  <div class="col-12">
                    <label class="form-label" for="fork-owner">Fork to</label>
                    <select class="form-select" id="fork-owner" name="owner">
                    {% if not personal_fork_disabled %}
                      <option
                        value="user:{{ current_user.uuid }}"
                        data-check-url="/api/v1/users/{{ current_user.uuid }}/check-repo-slug"
                        data-slug-prefix="{{ current_user.username }}"
                        {% if personal_selected %}selected{% endif %}
                      >
                        Personal ({{ current_user.username }})
                      </option>
                    {% endif %}
                    {% for team in teams if not team.disabled %}
                      <option
                        value="team:{{ team.team.uuid }}"
                        data-check-url="/api/v1/teams/{{ team.team.uuid }}/check-repo-slug"
                        data-slug-prefix="{{ team.team.slug }}"
                        {% if team.selected %}selected{% endif %}
                        {% if team.disabled %}disabled{% endif %}
                      >
                        {{ team.team.name }}
                      </option>
                    {% endfor %}
                    {% for team in teams if team.disabled %}
                      <option
                        value="team:{{ team.team.uuid }}"
                        data-check-url="/api/v1/teams/{{ team.team.uuid }}/check-repo-slug"
                        data-slug-prefix="{{ team.team.slug }}"
                        {% if team.selected %}selected{% endif %}
                        {% if team.disabled %}disabled{% endif %}
                      >
                        {{ team.team.name }}
                      </option>
                    {% endfor %}
                    {% if personal_fork_disabled %}
                      <option
                        value="user:{{ current_user.uuid }}"
                        data-check-url="/api/v1/users/{{ current_user.uuid }}/check-repo-slug"
                        data-slug-prefix="{{ current_user.username }}"
                        disabled
                      >
                        Personal ({{ current_user.username }})
                      </option>
                      {% endif %}
                    </select>
                    {% if personal_fork_disabled %}
                      <div class="form-text">Pick a team you belong to.</div>
                    {% else %}
                      <div class="form-text">Pick your personal account or a team you belong to.</div>
                    {% endif %}
                  </div>
                  <div class="col-12">
                    <label class="form-label" for="fork-name">Name</label>
                    <input
                    class="form-control"
                    id="fork-name"
                    name="name"
                    type="text"
                    value="{{ form.name }}"
                    required
                    data-slugify-source="fork-name"
                    data-slugify-target="fork-slug"
                    >
                    <div class="form-text">The display name shown in repo lists and pages.</div>
                  </div>
                  <div class="col-12">
                    <label class="form-label" for="fork-slug">Slug</label>
                    <input
                    class="form-control"
                    id="fork-slug"
                    name="slug"
                    type="text"
                    value="{{ form.slug }}"
                    required
                    pattern="[A-Za-z0-9-]+"
                    hx-get="/api/v1/users/{{ current_user.uuid }}/check-repo-slug"
                    hx-trigger="load, input delay:500ms"
                    hx-swap="none"
                    data-slug-check="true"
                    data-slug-feedback="fork-slug-feedback"
                    data-slugify-target="fork-slug"
                  >
                  <div class="form-text">Used in the repository URL and clone path.</div>
                  <div
                    class="form-text"
                    id="fork-slug-feedback"
                    aria-live="polite"
                    data-slug-prefix="{{ current_user.username }}"
                    ></div>
                  </div>
                  <div class="col-12">
                    <label class="form-label" for="fork-visibility">Visibility</label>
                    <select
                      class="form-select"
                      id="fork-visibility"
                      name="visibility"
                      data-upstream-visibility="{{ repo.visibility }}"
                    >
                      <option value="public" {% if form.visibility == "public" %}selected{% endif %}>Public</option>
                      <option value="private" {% if form.visibility == "private" %}selected{% endif %}>Private</option>
                    </select>
                    <div class="form-text">Defaults to the upstream repository visibility.</div>
                  </div>
                </div>
                <div class="mt-4">
                  {% with
                    primary_label="Create fork",
                    primary_disabled=fork_disabled,
                    cancel_disabled=fork_disabled,
                    cancel_href=repo_path
                  %}
                    {% include "partials/form_actions.html" %}
                  {% endwith %}
                </div>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% if repo.visibility == "private" %}
    {% with
      modal_id="confirm-fork-public",
      modal_title="Make fork public",
      modal_body="This fork will be public even though the upstream repo is private. Continue?",
      modal_confirm_text="Make public",
      modal_desc="Public forks can expose the contents of a private upstream repository.",
      modal_manual_submit=true
    %}
      {% include "partials/confirm_modal.html" %}
    {% endwith %}
  {% endif %}
{% endblock %}

{% block scripts %}
  <script>
    (function () {
      const $ownerSelect = $("#fork-owner");
      const $slugInput = $("#fork-slug");
      const $slugFeedback = $("#fork-slug-feedback");
      if (!$ownerSelect.length || !$slugInput.length || !$slugFeedback.length) {
        return;
      }

      function syncForkSlugTarget() {
        const $selected = $ownerSelect.find("option:selected").first();
        if (!$selected.length) {
          return;
        }
        const checkUrl = $selected.attr("data-check-url") || "";
        const prefix = $selected.attr("data-slug-prefix") || "";

        if (checkUrl) {
          $slugInput.attr("hx-get", checkUrl);
        } else {
          $slugInput.removeAttr("hx-get");
        }

        if (prefix) {
          $slugFeedback.attr("data-slug-prefix", prefix);
        } else {
          $slugFeedback.removeAttr("data-slug-prefix");
        }

        $slugFeedback.text("").attr("class", "form-text");
        $slugInput.removeClass("is-valid is-invalid");

        htmx.trigger($slugInput[0], "input");
      }

      $ownerSelect.on("change", syncForkSlugTarget);
      syncForkSlugTarget();

      const $visibilitySelect = $("#fork-visibility");
      const upstreamVisibility = $visibilitySelect.attr("data-upstream-visibility");
      if (!$visibilitySelect.length || upstreamVisibility !== "private") {
        return;
      }

      const $modalElement = $("#confirm-fork-public");
      if (!$modalElement.length) {
        return;
      }

      const modal = new bootstrap.Modal($modalElement[0]);
      let previousValue = $visibilitySelect.val();
      let pendingValue = null;
      let confirmedPublic = false;

      $visibilitySelect.on("change", function () {
        const value = $visibilitySelect.val();
        if (value === "public" && !confirmedPublic) {
          pendingValue = value;
          modal.show();
          return;
        }
        pendingValue = null;
        confirmedPublic = value === "public";
        previousValue = value;
      });

      $modalElement.on("click", "[data-confirm-action]", function () {
        confirmedPublic = true;
        previousValue = "public";
        pendingValue = null;
        modal.hide();
      });

      $modalElement.on("hidden.bs.modal", function () {
        if (!confirmedPublic && pendingValue === "public") {
          $visibilitySelect.val(previousValue);
        }
        pendingValue = null;
      });
    })();
  </script>
{% endblock %}