{% include 'mixins/partials/notify.html' %}
{% if page_title is not None %}
  <h1 class="title is-4">{{ page_title }}</h1>
{% endif %}
{% if page_subtitle is not None %}
  <h1 class="subtitle">{{ page_subtitle }}</h1>
{% endif %}
{% load crispy_forms_tags %}

<style>
  .persona-tab-pane {
    display: none;
  }

  .persona-tab-pane.is-active {
    display: block;
  }

  .persona-tab-pane-body {
    max-height: min(55vh, 34rem);
    overflow-y: auto;
    padding-right: 0.25rem;
  }
</style>

<form
  id="persona-form-tabs"
  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
  hx-post="{{ submit_url }}"
  hx-target="#modals-here"
  hx-swap="innerHTML">
  {% csrf_token %}
  {% for hidden in form.hidden_fields %}
    {{ hidden }}
  {% endfor %}
  {% if form.non_field_errors %}
    <article class="message is-danger">
      <div class="message-body">{{ form.non_field_errors }}</div>
    </article>
  {% endif %}

  <div class="tabs is-small is-toggle is-toggle-rounded" style="margin-bottom: 0.75rem;">
    <ul>
      <li class="is-active">
        <a href="#" data-persona-tab-target="identity">
          <span class="icon is-small"><i class="fa-solid fa-id-card"></i></span>
          <span>Identity</span>
        </a>
      </li>
      <li>
        <a href="#" data-persona-tab-target="expression">
          <span class="icon is-small"><i class="fa-solid fa-comments"></i></span>
          <span>Expression</span>
        </a>
      </li>
      <li>
        <a href="#" data-persona-tab-target="narrative">
          <span class="icon is-small"><i class="fa-solid fa-book-open"></i></span>
          <span>Narrative</span>
        </a>
      </li>
      <li>
        <a href="#" data-persona-tab-target="strategy">
          <span class="icon is-small"><i class="fa-solid fa-chess-knight"></i></span>
          <span>Strategy</span>
        </a>
      </li>
      <li>
        <a href="#" data-persona-tab-target="tuning">
          <span class="icon is-small"><i class="fa-solid fa-sliders"></i></span>
          <span>Tuning</span>
        </a>
      </li>
    </ul>
  </div>

  <div class="persona-tab-pane is-active" data-persona-tab-pane="identity">
    <div class="persona-tab-pane-body">
      {{ form.alias|as_crispy_field }}
      {{ form.mbti|as_crispy_field }}
      {{ form.mbti_identity|as_crispy_field }}
    </div>
  </div>

  <div class="persona-tab-pane" data-persona-tab-pane="expression">
    <div class="persona-tab-pane-body">
      {{ form.communication_style|as_crispy_field }}
      {{ form.tone|as_crispy_field }}
      {{ form.humor_style|as_crispy_field }}
      {{ form.flirting_style|as_crispy_field }}
    </div>
  </div>

  <div class="persona-tab-pane" data-persona-tab-pane="narrative">
    <div class="persona-tab-pane-body">
      {{ form.inner_story|as_crispy_field }}
      {{ form.core_values|as_crispy_field }}
      {{ form.likes|as_crispy_field }}
      {{ form.dislikes|as_crispy_field }}
    </div>
  </div>

  <div class="persona-tab-pane" data-persona-tab-pane="strategy">
    <div class="persona-tab-pane-body">
      {{ form.response_tactics|as_crispy_field }}
      {{ form.persuasion_tactics|as_crispy_field }}
      {{ form.boundaries|as_crispy_field }}
    </div>
  </div>

  <div class="persona-tab-pane" data-persona-tab-pane="tuning">
    <div class="persona-tab-pane-body">
      {{ form.trust|as_crispy_field }}
      {{ form.adaptability|as_crispy_field }}
    </div>
  </div>

  <div class="buttons" style="margin-top: 1rem; margin-bottom: 0;">
    {% if hide_cancel is not True %}
      <button
        type="button"
        class="button is-light modal-close-button">
        Cancel
      </button>
    {% endif %}
    <button type="submit" class="button modal-close-button">Submit</button>
  </div>
</form>

<script>
  (function () {
    const root = document.getElementById("persona-form-tabs");
    if (!root || root.dataset.tabsBound === "1") {
      return;
    }
    root.dataset.tabsBound = "1";

    const tabs = Array.from(root.querySelectorAll("[data-persona-tab-target]"));
    const panes = Array.from(root.querySelectorAll("[data-persona-tab-pane]"));

    function setActive(key) {
      tabs.forEach((tab) => {
        const li = tab.closest("li");
        if (!li) {
          return;
        }
        li.classList.toggle("is-active", tab.dataset.personaTabTarget === key);
      });
      panes.forEach((pane) => {
        pane.classList.toggle("is-active", pane.dataset.personaTabPane === key);
      });
    }

    tabs.forEach((tab) => {
      tab.addEventListener("click", function (event) {
        event.preventDefault();
        setActive(tab.dataset.personaTabTarget);
      });
    });

    if (tabs[0]) {
      setActive(tabs[0].dataset.personaTabTarget);
    }
  })();
</script>