{% extends 'index.html' %}
{% load static %}
{% load i18n %}
{% block content %}
  <style>
    .truncated-text {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .truncated-text::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
        pointer-events: none;
        /* Allow interaction with the text beneath the overlay */
    }
</style>

  <section class="oh-wrapper oh-main__topbar">
    <div class="oh-main__titlebar oh-main__titlebar--left oh-d-flex-column--resp oh-mb-3--small">
      <h1 class="oh-main__titlebar-title fw-bold">{% trans "Mail Templates" %}</h1>
    </div>
    {% if perms.base.add_horillamailtemplate %}
      <div class="oh-main__titlebar oh-main__titlebar--right oh-d-flex-column--resp oh-mb-3--small">
        <a href="#" data-toggle="oh-modal-toggle" data-target="#addTemplateModal" class="oh-btn oh-btn--secondary ml-2"><ion-icon name="add" class="mr-1 md hydrated" role="img" aria-label="add"></ion-icon>{% trans "Create" %}</a>
      </div>
    {% endif %}
  </section>

  <div class="oh-wrapper oh-faq-cards">
    {% for template in templates %}
      <div class="oh-faq-card">
        {% if perms.base.delete_horillamailtemplate %}
          <h3 class="oh-faq-card__title d-flex justify-content-between "><span>{{ template.title }}</span>
            <div>
            <a hx-get="{% url 'duplicate-mail-template' template.id %}" hx-target="#duplicateTemplateFormModal" data-toggle="oh-modal-toggle"
              data-target="#duplicateTemplateModal" title="{% trans 'Duplicate' %}" style= "cursor: pointer;">
              <ion-icon name="copy-outline"></ion-icon>
            </a>
            <a href="{% url "delete-mail-template" %}?ids={{template.id}}" class="text-danger" style="cursor: pointer;"
                onclick="return confirm('Do you want to delete this template?')" title="{% trans 'Edit' %}" >
              <ion-icon name="trash-outline"></ion-icon>
            </a>
          </div>
          </h3>
        {% endif %}
        {% if perms.base.change_horillamailtemplate %}

            {% endif %}
          <div class="oh-faq-card__desc" style="max-height: 500px; padding-top: 10px;">
          <div style="max-height: 350px;overflow: hidden;" class="truncated-text">{{ template.body|safe }}</div>
          </div>
        {% if perms.base.change_horillamailtemplate %}
          <a hx-get="{% url 'view-mail-template' template.id %}" hx-target="#viewTemplateModalBody" data-toggle="oh-modal-toggle" data-target="#viewTemplateModal" class="oh-btn oh-btn--secondary oh-btn--block">{% trans "View Template" %}</a>
        {% endif %}
        </div>
    {% endfor %}
  </div>
  <div class="oh-modal" id="viewTemplateModal" role="dialog" aria-labelledby="viewTemplateModal" aria-hidden="true">
    <div class="oh-modal__dialog">
      <div class="oh-modal__dialog-header">
        <span class="oh-modal__dialog-title" id="viewTemplateModalLabel"></span>
        <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
      </div>
      <div class="oh-modal__dialog-body" id="viewTemplateModalBody"></div>
      <div class="oh-modal__dialog-footer">
        <button type="submit" onclick="$('#submitFormButton')[0].click()" class="oh-btn oh-btn--secondary oh-btn--shadow">{% trans "Save" %}</button>
      </div>
    </div>
  </div>
  <div class="oh-modal" id="addTemplateModal" role="dialog" aria-labelledby="addTemplateModal" aria-hidden="true">
    <div class="oh-modal__dialog">
      <div class="oh-modal__dialog-header">
        <span class="oh-modal__dialog-title" id="addTemplateModalLabel">{% trans "Add Template" %}</span>
        <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
      </div>
      <div class="oh-modal__dialog-body" id="addTemplateModalBody">
        {% include 'mail/htmx/form.html' %}
      </div>
      <div class="oh-modal__dialog-footer">
        <button type="submit" onclick="$('#submitFormButton')[0].click()" class="oh-btn oh-btn--secondary oh-btn--shadow">{% trans "Save" %}</button>
      </div>
    </div>
  </div>
  <div class="oh-modal" id="duplicateTemplateModal" role="dialog" aria-labelledby="duplicateTemplateModal" aria-hidden="true">
    <div class="oh-modal__dialog">
      <div class="oh-modal__dialog-header">
        <span class="oh-modal__dialog-title" id="duplicateTemplateModalLabel">{% trans "Duplicate Template" %}</span>
        <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
      </div>
      <div class="oh-modal__dialog-body" id="duplicateTemplateFormModal"></div>
      <div class="oh-modal__dialog-footer">
        <button type="submit" onclick="$('#submitFormButton')[0].click()" class="oh-btn oh-btn--secondary oh-btn--shadow">{% trans "Save Duplicate" %}</button>
      </div>
    </div>
  </div>
  <script>
    function setModalLabel(label, modalTarget) {
        $(modalTarget).html(label)
    }
</script>
{% endblock %}