{% extends 'panel/base.html' %}

{% block panel_title %}Wiadomość od {{ message.name }}{% endblock %}
{% block heading %}{{ message.subject|default:"Wiadomosc bez tematu" }}{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Od {{ message.name }} &middot; {{ message.created_at|date:"SHORT_DATETIME_FORMAT" }}</p>{% endblock %}
{% block actions %}
<a class="btn-ghost" href="{% url 'panel:inbox:index' %}">Wróć do listy</a>
<a class="btn-ghost" href="#odpowiedz">Odpowiedz</a>
{% endblock %}

{% block content %}
<div class="grid gap-4 lg:grid-cols-3">

  <div class="space-y-4 lg:col-span-2">
    <section class="card">
      <dl class="grid gap-3 border-b border-slate-200 px-5 py-4 text-sm sm:grid-cols-2 dark:border-slate-800">
        <div>
          <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">Nadawca</dt>
          <dd class="font-medium">{{ message.name }}</dd>
        </div>
        <div>
          <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">E-mail</dt>
          <dd><a class="text-brand-600 hover:underline" href="mailto:{{ message.email }}">{{ message.email }}</a></dd>
        </div>
        {% if message.phone %}
          <div>
            <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">Telefon</dt>
            <dd><a class="text-brand-600 hover:underline" href="tel:{{ message.phone }}">{{ message.phone }}</a></dd>
          </div>
        {% endif %}
        <div>
          <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">Temat</dt>
          <dd>
            {{ message.subject|default:"bez tematu" }}
            {% if message.topic %}<a class="ml-1 text-xs text-brand-600 hover:underline" href="{% url 'panel:contact_topics:edit' message.topic.pk %}">z listy</a>{% endif %}
          </dd>
        </div>
        <div>
          <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">Status</dt>
          <dd><span class="badge {{ message.status_badge_class }}">{{ message.get_status_display }}</span></dd>
        </div>
      </dl>
      <div class="card-body whitespace-pre-line text-sm leading-relaxed">{{ message.message }}</div>
      {% if message.consent_text %}
        <p class="help border-t border-slate-200 px-5 py-3 dark:border-slate-800">Zaznaczona zgoda: {{ message.consent_text }}</p>
      {% endif %}
    </section>

    {% if message.is_answered %}
      <section class="card">
        <div class="card-body space-y-2">
          <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Wysłana odpowiedź</h2>
          <p class="help">
            {{ message.replied_at|date:"SHORT_DATETIME_FORMAT" }}{% if message.replied_by %}, {{ message.replied_by }}{% endif %}
          </p>
          <div class="whitespace-pre-line border-l-2 border-slate-200 pl-4 text-sm leading-relaxed dark:border-slate-700">{{ message.reply_body }}</div>
        </div>
      </section>
    {% endif %}

    <section class="card" id="odpowiedz">
      <div class="card-body space-y-4">
        <div class="space-y-1">
          <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">
            {% if message.is_answered %}Kolejna odpowiedź{% else %}Odpowiedz nadawcy{% endif %}
          </h2>
          <p class="help">
            Wiadomość idzie na adres {{ message.email }} przez skrzynkę serwisu
            (System &gt; Emaile &gt; Konfiguracja poczty). Nagłówek i stopkę doklei CMS.
          </p>
        </div>
        <form method="post" novalidate class="space-y-4">
          {% csrf_token %}
          {% include 'panel/partials/form.html' with form=reply_form %}
          <button class="btn-primary" type="submit" name="action" value="reply">Wyślij odpowiedź</button>
        </form>
      </div>
    </section>
  </div>

  <div class="space-y-4">
    <section class="card">
      <div class="card-body space-y-4">
        <div class="space-y-1">
          <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Obsługa</h2>
          <p class="help">Notatka zostaje w panelu - nadawca jej nie widzi.</p>
        </div>
        <form method="post" novalidate class="space-y-4">
          {% csrf_token %}
          {% include 'panel/partials/form.html' with form=note_form %}
          <button class="btn-primary" type="submit" name="action" value="note">Zapisz</button>
        </form>
      </div>
    </section>

    <section class="card">
      <div class="card-body space-y-3 text-sm">
        <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Szczegóły</h2>
        <div class="flex justify-between gap-3"><span class="text-slate-500">Otrzymano</span><span>{{ message.created_at|date:"SHORT_DATETIME_FORMAT" }}</span></div>
        <div class="flex justify-between gap-3"><span class="text-slate-500">Przeczytana</span><span>{% if message.is_read %}tak{% else %}nie{% endif %}</span></div>
        {% if message.ip %}
          <div class="flex justify-between gap-3"><span class="text-slate-500">Adres IP</span><span>{{ message.ip }}</span></div>
        {% endif %}

        <form method="post" action="{% url 'panel:inbox:message_delete' message.pk %}"
              class="border-t border-slate-200 pt-3 dark:border-slate-800"
              data-confirm="Usunąć tę wiadomość?">
          {% csrf_token %}
          <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Usuń wiadomość</button>
        </form>
      </div>
    </section>
  </div>
</div>
{% endblock %}