{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Distribution Lists" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Distribution Lists" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Deliver messages from one address to a managed group of recipients." %}</div>
        </div>
        <div class="col-12 col-sm-auto"><a href="{% url 'email_distribution_add' %}"
   class="btn btn-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="circle-plus"></i><span>{% translate "Create Distribution List" %}</span></a></div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Hosting" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Email" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Distribution Lists" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Distribution Lists" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Review each list, its members, and available management actions." %}</p>
            </div>
            <div class="eenos-card-action-icon">
                <i data-lucide="users"></i>
            </div>
        </div>
        <div class="table-responsive">
            <table id="distributionTable" class="table align-middle w-100">
                <thead>
                    <tr>
                        <th>{% translate "Distribution Address" %}</th>
                        <th>{% translate "Members" %}</th>
                        <th>{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <form method="post" id="deleteDistributionForm">
        {% csrf_token %}
        <input type="hidden" name="dist_delete" value="yes"><input type="hidden" name="domain" id="deleteDistributionDomain"><input type="hidden" name="email" id="deleteDistributionEmail">
    </form>
    <div class="modal fade"
         id="deleteDistributionModal"
         tabindex="-1"
         aria-labelledby="deleteDistributionTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h2 class="modal-title fs-5 d-flex align-items-center gap-2 text-danger" id="deleteDistributionTitle">
                            <i data-lucide="triangle-alert"></i><span>{% translate "Delete Distribution List" %}</span>
                        </h2>
                        <div class="small text-muted mt-1">{% translate "This permanently removes the distribution address and its configuration." %}</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate "Close" %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-info mb-4">
                        <div class="eenos-modal-info-icon"><i data-lucide="mails"></i></div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Distribution address" %}</div>
                            <div class="eenos-modal-info-value user-select-all" id="deleteDistributionAddress"></div>
                            <div class="small text-muted mt-1"><span id="deleteDistributionMemberCount">0</span> {% translate "configured members" %}</div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-danger mb-3">
                        <i data-lucide="triangle-alert"></i>
                        <div>
                            <strong>{% translate "This action cannot be undone" %}</strong>
                            <div>{% translate "The address will stop distributing incoming messages and its complete member list will be removed." %}</div>
                        </div>
                    </div>
                    <div class="small text-muted d-flex align-items-start gap-2">
                        <i data-lucide="info" class="flex-shrink-0"></i>
                        <span>{% translate "The members and their individual email accounts are not deleted." %}</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% translate "Keep List" %}</button>
                    <button type="button" id="confirmDeleteDistribution" class="btn btn-danger d-inline-flex align-items-center gap-2">
                        <i data-lucide="trash-2"></i><span>{% translate "Delete Distribution List" %}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}<script>(function($){"use strict";$(function(){let selected=null;const esc=v=>$('<div>').text(v==null?'':v).html();const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteDistributionModal'));const table=$('#distributionTable').DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'email_distributions_data' %}",dataSrc:'data'},pageLength:25,order:[[0,'asc']],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:'{% translate "Loading..." %}',emptyTable:"{% translate 'No distribution lists have been configured.' %}",zeroRecords:"{% translate 'No matching distribution lists found.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[{data:'email',width:'28%',responsivePriority:1,className:'text-nowrap',render:(v,t)=>t==='display'?'<a href="mailto:'+esc(v)+'" class="d-inline-flex align-items-center gap-1"><i data-lucide="mail"></i><span>'+esc(v)+'</span></a>':v},{data:'members',width:'62%',responsivePriority:2,render:(v,t)=>{const members=Array.isArray(v)?v:[];const text=members.join(', ');if(t!=='display')return text;return members.length?'<div class="d-flex flex-wrap gap-1">'+members.map(member=>'<span class="eenos-badge eenos-badge-neutral">'+esc(member)+'</span>').join('')+'</div>':'<span class="text-muted">{% translate "No members" %}</span>'; }},{data:null,width:'90px',orderable:false,searchable:false,responsivePriority:1,className:'text-end text-nowrap',render:(d,t,r)=>t==='display'?'<div class="eenos-dt-actions justify-content-end"><a href="'+esc(r.edit_url)+'" class="btn btn-sm btn-outline-primary" title="{% translate 'Manage members' %}"><i data-lucide="users"></i></a><button type="button" class="btn btn-sm btn-outline-danger delete-distribution" data-row="'+encodeURIComponent(JSON.stringify(r))+'" title="{% translate 'Delete' %}"><i data-lucide="trash-2"></i></button></div>':''}],drawCallback:()=>lucide.createIcons()});table.on('responsive-display',()=>lucide.createIcons());$(document).on('click','.delete-distribution',function(){selected=JSON.parse(decodeURIComponent(this.dataset.row));$('#deleteDistributionAddress').text(selected.email);$('#deleteDistributionMemberCount').text(selected.member_count||0);modal.show();});$('#confirmDeleteDistribution').on('click',function(){$('#deleteDistributionDomain').val(selected.domain);$('#deleteDistributionEmail').val(selected.email);document.getElementById('deleteDistributionForm').submit();});});})(jQuery);</script>{% endblock %}