{% extends "showcase/cabinet/base_cabinet.html" %}

{% block title %}Notifications — Templates{% endblock %}

{% block sidebar_title %}
<span class="bi bi-bell fs-5" style="color: var(--cab-primary);"></span>
<span class="cab-sidebar__title ms-2 fw-semibold text-white" style="font-size: 1rem; white-space: nowrap;">Notifications</span>
{% endblock %}

{% block sidebar_nav %}
<li>
  <a href="{% url 'codex_showcase:notifications_log' %}"
     class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2"
     style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-list-ul fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Sent Log</span>
  </a>
</li>
<li>
  <a href="{% url 'codex_showcase:notifications_templates' %}"
     class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 cab-nav__item--active"
     style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-file-text fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Templates</span>
  </a>
</li>
{% endblock %}

{% block extra_css %}
<style>
[x-cloak] { display: none !important; }
.tmpl-card { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tmpl-card:hover { border-color: #6366f1 !important; box-shadow: 0 2px 12px rgba(99,102,241,.1); }
.modal-overlay { display: flex; }
</style>
{% endblock %}

{% block cabinet_content %}
<div x-data="tmplModal()">

  {# ── Header ── #}
  {% include "showcase/cabinet/includes/_page_header.html" with title="Notification Templates" subtitle="Predefined message templates sent to clients" %}

  {# ── Template cards ── #}
  <div class="row g-3">
    {% for tmpl in templates %}
    <div class="col-lg-6">
      <div class="tmpl-card bg-white rounded-3 border p-4 h-100" @click="open({{ forloop.counter0 }})">

        <div class="d-flex align-items-start justify-content-between mb-3">
          <div>
            <div class="fw-semibold" style="font-size: .95rem; color: #1e293b;">{{ tmpl.label }}</div>
            <div class="text-muted mt-1" style="font-size: .75rem;">
              <i class="bi bi-lightning-charge me-1"></i>{{ tmpl.trigger }}
            </div>
          </div>
          <div class="d-flex gap-1 flex-shrink-0 ms-3">
            {% for ch in tmpl.channel_details %}
            <span class="badge rounded-pill px-2 py-1"
                  style="background: {{ ch.bg }}; color: {{ ch.color }}; font-size: .7rem; font-weight: 600;">
              <i class="bi {{ ch.icon }} me-1"></i>{{ ch.label }}
            </span>
            {% endfor %}
          </div>
        </div>

        <div class="rounded-2 px-3 py-2 mb-2" style="background: #f8fafc; border: 1px solid #e2e8f0;">
          <div class="text-muted mb-1" style="font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;">Subject</div>
          <div style="font-size: .82rem; color: #334155;">{{ tmpl.subject }}</div>
        </div>

        <div class="rounded-2 px-3 py-2" style="background: #f8fafc; border: 1px solid #e2e8f0;">
          <div class="text-muted mb-1" style="font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;">Preview</div>
          <div class="text-muted" style="font-size: .8rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ tmpl.preview }}</div>
        </div>

        <div class="mt-3 text-end">
          <span class="text-primary" style="font-size: .78rem; cursor: pointer;">
            <i class="bi bi-eye me-1"></i>Preview full
          </span>
        </div>

      </div>
    </div>
    {% empty %}
    <div class="col-12">
      {% include "showcase/cabinet/includes/_empty_state.html" with icon="bi-file-earmark-x" title="No templates" subtitle="No notification templates defined yet" %}
    </div>
    {% endfor %}
  </div>

  {# ── Preview Modal ── #}
  <div x-cloak x-show="show"
       class="position-fixed modal-overlay align-items-center justify-content-center"
       style="inset:0; background: rgba(15,23,42,.45); z-index: 1050;"
       @click.self="close()">

    <div class="bg-white rounded-4 shadow-lg" style="width: 560px; max-width: 95vw; overflow: hidden;">

      <div class="d-flex align-items-center justify-content-between px-4 py-3 border-bottom">
        <div>
          <div class="fw-semibold" style="font-size: .95rem;" x-text="t.label"></div>
          <div class="text-muted" style="font-size: .75rem;" x-text="t.trigger"></div>
        </div>
        <button @click="close()" class="btn btn-sm btn-outline-secondary d-flex align-items-center justify-content-center" style="width:30px;height:30px;padding:0;border-radius:50%;">
          <span class="bi bi-x" style="font-size:.9rem;"></span>
        </button>
      </div>

      <div class="px-4 py-4">
        <div class="mb-3">
          <div class="text-muted mb-1" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;">Channels</div>
          <div class="d-flex gap-2" x-html="t.channelBadges"></div>
        </div>
        <div class="mb-3">
          <div class="text-muted mb-1" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;">Subject</div>
          <div class="fw-semibold" style="font-size: .88rem; color: #1e293b;" x-text="t.subject"></div>
        </div>
        <div>
          <div class="text-muted mb-2" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;">Message Body</div>
          <div class="rounded-3 p-3" style="background: #f8fafc; border: 1px solid #e2e8f0; font-size: .84rem; line-height: 1.6; color: #334155; white-space: pre-wrap;" x-text="t.preview"></div>
        </div>
        <div class="mt-3 p-3 rounded-2" style="background: #fffbeb; border: 1px solid #fde68a; font-size: .75rem; color: #92400e;">
          <i class="bi bi-info-circle me-1"></i>
          Variables like <code>{{ "{{" }} client_name {{ "}}" }}</code> are replaced with real data when the notification is sent.
        </div>
      </div>

    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
const TEMPLATES = [
  {% for tmpl in templates %}
  {
    label: `{{ tmpl.label|escapejs }}`,
    trigger: `{{ tmpl.trigger|escapejs }}`,
    subject: `{{ tmpl.subject|escapejs }}`,
    preview: `{{ tmpl.preview|escapejs }}`,
    channelBadges: `{% for ch in tmpl.channel_details %}<span class="badge rounded-pill px-2 py-1 me-1" style="background:{{ ch.bg }};color:{{ ch.color }};font-size:.72rem;font-weight:600"><i class="bi {{ ch.icon }} me-1"></i>{{ ch.label }}</span>{% endfor %}`,
  }{% if not forloop.last %},{% endif %}
  {% endfor %}
];

function tmplModal() {
  return {
    show: false,
    t: {},
    open(idx) {
      this.t = TEMPLATES[idx];
      this.show = true;
    },
    close() { this.show = false; }
  }
}
</script>
{% endblock %}