{% 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>
  .person-tab-pane {
    display: none;
  }

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

  .person-tab-pane-body {
    max-height: min(52vh, 30rem);
    overflow-y: auto;
    padding-right: 0.25rem;
  }

  .person-content-count {
    margin-left: 0.3rem;
    min-width: 2.35rem;
    text-align: center;
  }
</style>

<form
  id="person-form-tabs-{{ object.id }}"
  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 %}

  {{ form.name|as_crispy_field }}
  <div class="columns is-multiline">
    <div class="column is-12-mobile is-4-tablet">{{ form.sentiment|as_crispy_field }}</div>
    <div class="column is-12-mobile is-4-tablet">{{ form.timezone|as_crispy_field }}</div>
    <div class="column is-12-mobile is-4-tablet">{{ form.last_interaction|as_crispy_field }}</div>
  </div>

  <div class="tabs is-small is-toggle is-toggle-rounded" style="margin-bottom: 0.75rem;">
    <ul>
      <li class="is-active">
        <a href="#" data-person-tab-target="summary">
          <span class="icon is-small"><i class="fa-solid fa-file-lines"></i></span>
          <span>Summary</span>
          <span id="person-count-summary-{{ object.id }}" class="tag is-light is-small person-content-count">0</span>
        </a>
      </li>
      <li>
        <a href="#" data-person-tab-target="profile">
          <span class="icon is-small"><i class="fa-solid fa-id-card"></i></span>
          <span>Profile</span>
          <span id="person-count-profile-{{ object.id }}" class="tag is-light is-small person-content-count">0</span>
        </a>
      </li>
      <li>
        <a href="#" data-person-tab-target="revealed">
          <span class="icon is-small"><i class="fa-solid fa-eye"></i></span>
          <span>Revealed</span>
          <span id="person-count-revealed-{{ object.id }}" class="tag is-light is-small person-content-count">0</span>
        </a>
      </li>
      <li>
        <a href="#" data-person-tab-target="likes">
          <span class="icon is-small"><i class="fa-solid fa-thumbs-up"></i></span>
          <span>Likes</span>
          <span id="person-count-likes-{{ object.id }}" class="tag is-light is-small person-content-count">0</span>
        </a>
      </li>
      <li>
        <a href="#" data-person-tab-target="dislikes">
          <span class="icon is-small"><i class="fa-solid fa-thumbs-down"></i></span>
          <span>Dislikes</span>
          <span id="person-count-dislikes-{{ object.id }}" class="tag is-light is-small person-content-count">0</span>
        </a>
      </li>
    </ul>
  </div>

  <div class="person-tab-pane is-active" data-person-tab-pane="summary">
    <div class="person-tab-pane-body">
      {{ form.summary|as_crispy_field }}
    </div>
  </div>

  <div class="person-tab-pane" data-person-tab-pane="profile">
    <div class="person-tab-pane-body">
      {{ form.profile|as_crispy_field }}
    </div>
  </div>

  <div class="person-tab-pane" data-person-tab-pane="revealed">
    <div class="person-tab-pane-body">
      {{ form.revealed|as_crispy_field }}
    </div>
  </div>

  <div class="person-tab-pane" data-person-tab-pane="likes">
    <div class="person-tab-pane-body">
      {{ form.likes|as_crispy_field }}
    </div>
  </div>

  <div class="person-tab-pane" data-person-tab-pane="dislikes">
    <div class="person-tab-pane-body">
      {{ form.dislikes|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("person-form-tabs-{{ object.id }}");
    if (!root || root.dataset.tabsBound === "1") {
      return;
    }
    root.dataset.tabsBound = "1";

    const tabs = Array.from(root.querySelectorAll("[data-person-tab-target]"));
    const panes = Array.from(root.querySelectorAll("[data-person-tab-pane]"));
    const contentFields = ["summary", "profile", "revealed", "likes", "dislikes"];

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

    function updateCounts() {
      contentFields.forEach((name) => {
        const field = root.querySelector("[name='" + name + "']");
        const counter = document.getElementById("person-count-" + name + "-{{ object.id }}");
        if (!field || !counter) {
          return;
        }
        const length = (field.value || "").trim().length;
        counter.textContent = String(length);
      });
    }

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

    contentFields.forEach((name) => {
      const field = root.querySelector("[name='" + name + "']");
      if (field) {
        field.addEventListener("input", updateCounts);
      }
    });

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