{% extends "index.html" %}

{% block content %}
  <section class="section">
    <div class="container" style="max-width: 44rem;">
      <div class="level" style="margin-bottom: 0.75rem;">
        <div class="level-left">
          <div>
            <h1 class="title is-4" style="margin-bottom: 0.2rem;">WhatsApp Chat Link</h1>
            <p class="is-size-7 has-text-grey">Link a WhatsApp chat identifier to a person. This link is WhatsApp-only.</p>
          </div>
        </div>
        <div class="level-right">
          <a class="button is-light" href="{% url 'whatsapp' %}">
            <span class="icon is-small"><i class="fa-solid fa-arrow-left"></i></span>
            <span>Back To WhatsApp</span>
          </a>
        </div>
      </div>

      {% if notice_message %}
        <article class="notification is-{{ notice_level|default:'info' }} is-light">
          {{ notice_message }}
        </article>
      {% endif %}

      <article class="box">
        <form method="post">
          {% csrf_token %}
          <div class="field">
            <label class="label is-small">Chat Identifier</label>
            <div class="control">
              <input class="input" type="text" name="identifier" value="{{ identifier }}" required>
            </div>
          </div>

          <div class="field">
            <label class="label is-small">Existing Person</label>
            <div class="select is-fullwidth">
              <select name="person_id">
                <option value="">- Select person -</option>
                {% for person in people %}
                  <option value="{{ person.id }}" {% if existing and existing.person_id == person.id %}selected{% endif %}>{{ person.name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <div class="field">
            <label class="label is-small">Or Create Person</label>
            <div class="control">
              <input class="input" type="text" name="person_name" placeholder="New person name">
            </div>
          </div>

          <div class="field">
            <label class="label is-small">Chat JID (optional)</label>
            <div class="control">
              <input class="input" type="text" name="chat_jid" value="{% if existing %}{{ existing.chat_jid|default:'' }}{% endif %}">
            </div>
          </div>

          <div class="field">
            <label class="label is-small">Display Name (optional)</label>
            <div class="control">
              <input class="input" type="text" name="chat_name" value="{% if existing %}{{ existing.chat_name|default:'' }}{% endif %}">
            </div>
          </div>

          <button class="button is-link" type="submit">
            <span class="icon is-small"><i class="fa-solid fa-link"></i></span>
            <span>Save WhatsApp Chat Link</span>
          </button>
        </form>
      </article>

      {% if existing %}
        <article class="notification is-light" style="margin-top: 0.8rem;">
          Current link: <strong>{{ existing.person.name }}</strong> ← <code>{{ existing.chat_identifier }}</code>
        </article>
      {% endif %}
    </div>
  </section>
{% endblock %}