{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}


{% block title %}
<H2>{{ SIRENE_APPNAME|default:"Sirene" }}</H2>
<hr>{% endblock %}

{% block content %}

<div class="btn-group mb-3" role="group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fa fa-lg fa-bars"></i>&nbsp; {% translate 'Menu' %}
    </button>
    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" href="/?public=yes">
                <i class="fa fa-eye"></i>&nbsp; {% translate 'Public page' %}
            </a>
        </li>
        <li>
            <a class="dropdown-item" href="{% url 'app_sirene:anonymous' %}">
                <i class="fa fa-user-secret"></i>&nbsp; {% translate 'Anonymous page' %}
            </a>
        </li>

        {% if 'p_sirene_history' in aaa.perms %}
        <li>
            <a class="dropdown-item" href="{% url 'app_sirene:archive' %}">
                <i class="fa fa-archive"></i>&nbsp; {% translate 'Archive' %}
            </a>
        </li>
        {% endif %}

        {% if 'p_sirene_new' in aaa.perms %}
        <li><hr class="dropdown-divider"></li>
        <li>
            <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#newMessageTemplateModal" style="border: none; background: none; text-align: left; padding: 0.5rem 1rem;">
                <i class="fa fa-plus"></i>&nbsp; {% translate 'New message from template' %}
            </button>
        </li>
        <li>
            <a class="dropdown-item" href="{% url 'app_sirene:new_message' %}">
                <i class="fa fa-envelope"></i>&nbsp; {% translate 'New message (empty form)' %}
            </a>
        </li>
        {% endif %}


        {% if 'p_sirene_sms_send' in aaa.perms %}
        <li><hr class="dropdown-divider"></li>
        <li>
            <a class="dropdown-item" href="{% url 'app_sirene:sms_send' %}">
                <i class="fa fa-paper-plane"></i>&nbsp; {% translate 'SMS Send (Sarbacane)' %}
            </a>
        </li>
        {% endif %}


        <!-- TODO ? permission here for templates edition ? -->
        <li><hr class="dropdown-divider"></li>
        <li>
            <a class="dropdown-item" href="{% url 'app_data:instance_list' 'sirene_template' %}">
                <i class="fa fa-edit"></i>&nbsp; {% translate 'Edit Message Templates' %}
            </a>
        </li>
        <li>
            <a class="dropdown-item" href="{% url 'app_data:instance_list' 'sirene_public' %}">
                <i class="fa fa-edit"></i>&nbsp; {% translate 'Edit Public Pages templates' %}
            </a>
        </li>
        

        {% if 'p_sirene_flushall' in aaa.perms %}
        <li><hr class="dropdown-divider"></li>
        <li>
            <button class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#flushallConfirmModal" style="border: none; background: none; text-align: left; padding: 0.5rem 1rem;">
                <i class="fa fa-trash"></i>&nbsp; {% translate 'Tool Archive-All' %}
            </button>
        </li>
        {% endif %}


        <li><hr class="dropdown-divider"></li>
        {% if 'p_conf_view' in aaa.perms %}
        <li>
            <a class="dropdown-item" href="{% url 'app_home:configuration' 'sirene' %}">
                <i class="fa fa-cog"></i>&nbsp; {% translate 'Configuration' %}
            </a>
        </li>
        {% endif %}
        <!-- <li>
            <a class="dropdown-item" href="#">
                <i class="fa fa-book"></i>&nbsp; {% translate 'Doc & Usage' %}
            </a>
        </li> -->
    </ul>
</div>





<hr>
{% if pages %}{% for page in pages %}

<div class="d-flex">
    <div class="card flex-fill">
        <div class="card-body py-2 my-0">
            <div class="d-flex align-items-start">

                <div class="flex-grow-1">
                    <h4 class="mb-2">
                        <a class="text-decoration-none" href="{% url 'app_sirene:detail' page.id %}">
                            <i class="fa fa-plus" aria-hidden="true"></i>
                            {{ page.displayname }}
                        </a>
                    </h4>

                    {% if page.is_restricted %}
                    <p class="mb-2 h4">
                        <span class="badge text-bg-dark">
                            {% translate 'Private' %}
                        </span>
                    </p>
                    {% endif %}


                    <p>
                        <span class="text-muted">
                        {{ page.created_at }}
                        </span>
                    </p>
                    
                    {% if  page.updated_at %}
                    <span class="badge badge-pill text-bg-secondary">
                    <!-- TODO -->{{ page.updated_at }}
                    </span>
                    {% endif %}


                </div>

                <div class="d-inline-block ms-3">
                    <p class="h4">
                        <span class="badge text-bg-{{ page.bgcolor }}">
                            {{ page.category }} / {{ page.severity }}
                        </span>
                    </p>
                </div>

            </div>
        </div>
    </div>
</div>

<br>
{% endfor %}

{% else %}
<span class="text-muted">
    {% translate 'No notifications' %}
</span>
{% endif %}

<!-- New Message from Template Modal -->
<div class="modal fade" id="newMessageTemplateModal" tabindex="-1" aria-labelledby="newMessageTemplateLabel" aria-hidden="true"
	hx-trigger="show.bs.modal from:#newMessageTemplateModal"
	hx-get="{% url 'app_sirene:template_list' %}"
	hx-target="#templateModalBody"
	hx-swap="innerHTML"
	hx-indicator="#templateLoadingSpinner">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="newMessageTemplateLabel">{% translate 'New message from template' %}</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body" id="templateModalBody">
				<div class="spinner-border spinner-border-sm me-2" id="templateLoadingSpinner" role="status">
					<span class="visually-hidden">{% translate 'Loading' %}...</span>
				</div>
				{% translate 'Loading templates...' %}
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate 'Cancel' %}</button>
			</div>
		</div>
	</div>
</div>

<!-- Close ALL Confirmation Modal -->
<div class="modal fade" id="flushallConfirmModal" tabindex="-1" aria-labelledby="flushallConfirmLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="flushallConfirmLabel">{% translate 'Confirm Archive All' %}</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				{% translate 'Are you sure you want to archive all messages? This action cannot be undone.' %}
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate 'Cancel' %}</button>
				<form method="post" action="{% url 'app_sirene:close_all' %}" style="display: inline;">
					{% csrf_token %}
					<button type="submit" class="btn btn-danger">{% translate 'Archive All' %}</button>
				</form>
			</div>
		</div>
	</div>
</div>

{% endblock %}