{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Mailing Lists" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Mailing Lists" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Manage Mailman 3 lists, administrators, members, and settings." %}</div>
        </div>
        <div class="col-12 col-sm-auto"><a href="{% url 'email_mailman_add' %}"
   class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="circle-plus"></i><span>{% translate "Create Mailing 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 "Mailing Lists" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Mailman Mailing Lists" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Open a list, manage members, update the administrator password, or remove the list." %}</p>
            </div>
            <div class="eenos-card-action-icon">
                <i data-lucide="mails"></i>
            </div>
        </div>
        <div class="table-responsive">
            <table id="mailingListsTable" class="table align-middle w-100">
                <thead>
                    <tr>
                        <th>{% translate "List" %}</th>
                        <th>{% translate "Posting Address" %}</th>
                        <th>{% translate "Administrator" %}</th>
                        <th>{% translate "Visibility" %}</th>
                        <th>{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <form method="post" id="deleteMailingListForm">
        {% csrf_token %}
        <input type="hidden" name="mailman_delete" value="yes"><input type="hidden" name="domain" id="deleteMailingListDomain"><input type="hidden" name="list" id="deleteMailingListAddress">
    </form>
    <form method="post" id="adminPasswordForm">
        {% csrf_token %}
        <input type="hidden" name="admin_change_password" value="yes"><input type="hidden" name="list" id="passwordMailingList"><input type="hidden" name="admin" id="passwordAdmin"><input type="hidden" name="adminpass" id="passwordAdminValue">
    </form>
    <div class="modal fade"
         id="deleteMailingListModal"
         tabindex="-1"
         aria-labelledby="deleteMailingListTitle"
         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"
                            id="deleteMailingListTitle"><i data-lucide="trash-2"></i>{% translate "Delete Mailing List" %}</h2>
                        <div class="small text-muted mt-1">{% translate "This permanently removes the Mailman list." %}</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="list"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Mailing list" %}</div>
                            <div class="eenos-modal-info-value" id="deleteMailingListLabel"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-danger mb-0">
                        <i data-lucide="triangle-alert"></i>
                        <div>
                            <strong>{% translate "The list and membership configuration will be removed" %}</strong>
                            <div>{% translate "Messages can no longer be posted to this mailing list after deletion." %}</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" id="confirmDeleteMailingList" class="btn btn-danger"><i data-lucide="trash-2"></i>{% translate "Delete List" %}</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="adminPasswordModal"
         tabindex="-1"
         aria-labelledby="adminPasswordTitle"
         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"
                            id="adminPasswordTitle"><i data-lucide="key-round"></i>{% translate "Change Administrator Password" %}</h2>
                        <div class="small text-muted mt-1">{% translate "Set a new password for the mailing list administrator." %}</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="user-cog"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Administrator" %}</div>
                            <div class="eenos-modal-info-value" id="passwordAdminLabel"></div>
                            <div class="small text-muted" id="passwordListLabel"></div>
                        </div>
                    </div>
                    <form id="adminPasswordInputForm" class="eenos-form">
                        <label class="form-label" for="newAdminPassword">{% translate "New Password" %}</label>
                        <div class="eenos-password-generator">
                            <div class="input-group email-password-input-group">
                                <div class="eenos-password-control">
                                    <input type="password"
                                           id="newAdminPassword"
                                           class="form-control form-control-sm eenos-password-input"
                                           required
                                           minlength="8"
                                           autocomplete="new-password"
                                           placeholder="{% translate 'Enter a new password' %}"
                                           data-parsley-required-message="{% translate 'Enter a new administrator password.' %}"
                                           data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}">
                                </div>
                                <button class="btn btn-sm btn-outline-secondary eenos-password-toggle"
                                        title="{% translate 'Show password' %}"
                                        type="button"
                                        aria-label="{% translate 'Show password' %}">
                                    <i data-lucide="eye"></i>
                                </button><button type="button"
        class="btn btn-sm btn-outline-primary eenos-password-generate"
        title="{% translate 'Generate secure password' %}"
        aria-label="{% translate 'Generate secure password' %}"><i data-lucide="wand-sparkles"></i><span class="d-none d-sm-inline">{% translate "Generate" %}</span></button>
                            </div>
                            <div class="eenos-password-strength mt-2">
                                <div class="progress" style="height:5px">
                                    <div class="progress-bar eenos-password-strength-progress"></div>
                                </div>
                                <small class="eenos-password-strength-text text-muted"></small>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" id="confirmAdminPassword" class="btn btn-primary"><i data-lucide="save"></i>{% translate "Save Password" %}</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 deleteModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteMailingListModal'));const passwordModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('adminPasswordModal'));const table=$('#mailingListsTable').DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'email_mailman_lists_data' %}",dataSrc:'data'},pageLength:25,order:[[0,'asc']],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:'{% translate "Loading..." %}',zeroRecords:"{% translate 'No matching mailing lists found.' %}",emptyTable:"{% translate 'No mailing lists are configured.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[{data:'list_name',width:'24%',responsivePriority:1,className:'text-nowrap',render:(v,t,r)=>t==='display'?'<div><a href="'+esc(r.list_url)+'" target="_blank" rel="noopener" class="d-inline-flex align-items-center gap-1"><i data-lucide="external-link"></i><span>'+esc(v)+'</span></a><div class="small text-muted">'+esc(r.description)+'</div></div>':v},{data:'email',width:'25%',responsivePriority:2,className:'text-nowrap',render:(v,t)=>t==='display'?'<a href="mailto:'+esc(v)+'">'+esc(v)+'</a>':v},{data:'admin',width:'27%',responsivePriority:3,render:(v,t,r)=>t==='display'?'<div class="d-flex align-items-center gap-2"><span><strong>'+esc(r.admin_name)+'</strong><span class="d-block small text-muted">'+esc(v)+'</span></span><span class="eenos-dt-actions"><button type="button" class="btn btn-sm btn-outline-primary change-admin-password" data-row="'+encodeURIComponent(JSON.stringify(r))+'" title="{% translate 'Change administrator password' %}" aria-label="{% translate 'Change administrator password' %}"><i data-lucide="key-round"></i></button></span></div>':v},{data:'visibility',width:'14%',responsivePriority:4,className:'text-nowrap',render:(v,t)=>t==='display'?(v==='private'?'<span class="badge eenos-badge-neutral">{% translate "Private" %}</span>':'<span class="badge eenos-badge-info">{% translate "Public" %}</span>'):v},{data:null,width:'110px',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.members_url)+'" class="btn btn-sm btn-outline-primary" title="{% translate 'Manage members' %}"><i data-lucide="users"></i></a><a href="'+esc(r.settings_url)+'" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary" title="{% translate 'Mailman settings' %}"><i data-lucide="settings"></i></a><button type="button" class="btn btn-sm btn-outline-danger delete-mailing-list" 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-mailing-list',function(){selected=JSON.parse(decodeURIComponent(this.dataset.row));$('#deleteMailingListLabel').text(selected.email);deleteModal.show();});$('#confirmDeleteMailingList').on('click',function(){$('#deleteMailingListDomain').val(selected.domain);$('#deleteMailingListAddress').val(selected.email);document.getElementById('deleteMailingListForm').submit();});$(document).on('click','.change-admin-password',function(){selected=JSON.parse(decodeURIComponent(this.dataset.row));$('#passwordAdminLabel').text(selected.admin);$('#passwordListLabel').text(selected.email);$('#newAdminPassword').val('').trigger('input');passwordModal.show();});$('#confirmAdminPassword').on('click',function(){const form=$('#adminPasswordInputForm').parsley();form.validate();if(!form.isValid())return;$('#passwordMailingList').val(selected.email);$('#passwordAdmin').val(selected.admin);$('#passwordAdminValue').val($('#newAdminPassword').val());document.getElementById('adminPasswordForm').submit();});});})(jQuery);</script>{% endblock %}