{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Manage Distribution Members" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Manage Distribution Members" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Add or remove recipients for this distribution address." %}</div>
        </div>
        <div class="col-12 col-sm-auto"><a href="{% url 'email_distribution' %}"
   class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="mails"></i><span>{% translate "Distribution Lists" %}</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><a href="{% url 'email_distribution' %}">{% translate "Distribution Lists" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Manage Members" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card mb-4">
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3 min-w-0">
                <div class="eenos-card-action-icon flex-shrink-0"><i data-lucide="mails"></i></div>
                <div class="min-w-0">
                    <div class="small text-muted mb-1">{% translate "Distribution List" %}</div>
                    <a href="mailto:{{ dlist }}" class="fw-semibold text-break user-select-all">{{ dlist }}</a>
                </div>
            </div>
            <div class="d-flex align-items-center gap-2 flex-shrink-0 border rounded px-3 py-2">
                <i data-lucide="users" class="text-muted"></i>
                <span class="small text-muted">{% translate "Total Members" %}</span>
                <span class="fw-semibold" id="distributionMemberCount">&mdash;</span>
            </div>
        </div>
    </div>
    <div class="row g-4">
        <div class="col-12 col-xl-7">
            <div class="eenos-card h-100">
                <div class="eenos-card-header">
                    <div>
                        <h2 class="eenos-card-title">{% translate "Current Members" %}</h2>
                        <p class="eenos-card-subtitle">{% translate "Select individual members or remove several addresses together." %}</p>
                    </div>
                    <div class="eenos-card-action-icon">
                        <i data-lucide="users"></i>
                    </div>
                </div>
                <div class="d-flex justify-content-start mb-3">
                    <button type="button" id="bulkDeleteMembers" class="btn btn-outline-danger d-inline-flex align-items-center gap-2"><i data-lucide="trash-2"></i>{% translate "Remove Selected" %}</button>
                </div>
                <div class="table-responsive">
                    <table id="distributionMembersTable" class="table align-middle w-100">
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox"
                                           id="checkAllMembers"
                                           class="form-check-input"
                                           aria-label="{% translate 'Select all members' %}">
                                </th>
                                <th>{% translate "Member Email Address" %}</th>
                                <th>{% translate "Action" %}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-5">
            <form method="post" id="addMembersForm" class="eenos-form h-100" data-parsley-validate>
                {% csrf_token %}
                <input type="hidden" name="edit_distribution" value="yes">
                <div class="eenos-card h-100 d-flex flex-column">
                    <div class="eenos-card-header">
                        <div>
                            <h2 class="eenos-card-title">{% translate "Add Members" %}</h2>
                            <p class="eenos-card-subtitle">{% translate "Add one or more recipients to this distribution list." %}</p>
                        </div>
                        <div class="eenos-card-action-icon"><i data-lucide="user-plus"></i></div>
                    </div>
                    <label class="form-label" for="newDistributionMembers">{% translate "Member Email Addresses" %}</label>
                    <textarea id="newDistributionMembers" name="memberlist" class="form-control" rows="8" autocomplete="off" required data-parsley-required-message="{% translate "Please enter at least one member email address." %}" placeholder="member1@example.com&#10;member2@example.com">{{ form.memberlist.value|default:"" }}</textarea>
                    <div class="form-text">{% translate "Enter one address per line or separate addresses with commas." %}</div>
                    <div class="d-flex justify-content-start mt-4">
                        <button type="button" id="openAddMembers" class="btn btn-primary d-inline-flex align-items-center gap-2">
                            <i data-lucide="user-plus"></i><span>{% translate "Add Members" %}</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <form method="post" id="deleteMembersForm">
        {% csrf_token %}
        <input type="hidden" name="member_delete" value="yes"><input type="hidden" name="memberlist" id="deleteMemberList">
    </form>
    <div class="modal fade"
         id="addMembersModal"
         tabindex="-1"
         aria-labelledby="addMembersTitle"
         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="addMembersTitle"><i data-lucide="user-plus"></i>{% translate "Add Distribution Members" %}</h2><div class="small text-muted mt-1">{% translate "The new recipients will begin receiving messages sent to this 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"><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">{{ dlist }}</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="confirmAddMembers" class="btn btn-primary"><i data-lucide="user-plus"></i>{% translate "Add Members" %}</button></div></div></div></div>
    <div class="modal fade"
         id="deleteMembersModal"
         tabindex="-1"
         aria-labelledby="deleteMembersTitle"
         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="deleteMembersTitle"><i data-lucide="user-minus"></i>{% translate "Remove Distribution Members" %}</h2>
                        <div class="small text-muted mt-1">{% translate "Confirm removal from this distribution 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="users"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Selected members" %}</div>
                            <div class="eenos-modal-info-value" id="selectedMemberSummary"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-danger mb-0">
                        <i data-lucide="triangle-alert"></i>
                        <div>
                            <strong>{% translate "Selected members will be removed" %}</strong>
                            <div>{% translate "They will no longer receive messages sent to this distribution address." %}</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="confirmDeleteMembers" class="btn btn-danger"><i data-lucide="user-minus"></i>{% translate "Remove Members" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}<script>(function($){"use strict";$(function(){let pending=[];const esc=v=>$('<div>').text(v==null?'':v).html();const addModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('addMembersModal'));const deleteModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteMembersModal'));const table=$('#distributionMembersTable').DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'email_distribution_members_data' %}",data:{dlist:"{{ dlist|escapejs }}"},dataSrc:function(json){const rows=json.data||[];$("#distributionMemberCount").text(rows.length);return rows;}},pageLength:25,order:[[1,'asc']],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:'{% translate "Loading..." %}',emptyTable:"{% translate 'No members have been added to this distribution list.' %}",zeroRecords:"{% translate 'No matching members found.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[{data:null,width:'48px',orderable:false,searchable:false,responsivePriority:1,className:'text-center',render:(d,t,r)=>t==='display'?'<input type="checkbox" class="form-check-input member-check" value="'+esc(r.email)+'" aria-label="{% translate 'Select member' %}">':''},{data:'email',width:'auto',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:null,width:'70px',orderable:false,searchable:false,responsivePriority:2,className:'text-end text-nowrap',render:(d,t,r)=>t==='display'?'<div class="eenos-dt-actions justify-content-end"><button type="button" class="btn btn-sm btn-outline-danger remove-member" data-email="'+encodeURIComponent(r.email)+'" title="{% translate 'Remove member' %}"><i data-lucide="user-minus"></i></button></div>':''}],drawCallback:()=>lucide.createIcons()});table.on('responsive-display',()=>lucide.createIcons());$('#checkAllMembers').on('change',function(){$('.member-check').prop('checked',this.checked);});function openDelete(items){pending=items;if(!pending.length)return;$('#selectedMemberSummary').text(pending.length===1?pending[0]:pending.length+' {% translate "members" %}');deleteModal.show();}$(document).on('click','.remove-member',function(){openDelete([decodeURIComponent(this.dataset.email)]);});$('#bulkDeleteMembers').on('click',function(){openDelete($('.member-check:checked').map(function(){return this.value;}).get());});$('#confirmDeleteMembers').on('click',function(){$('#deleteMemberList').val(pending.join(','));document.getElementById('deleteMembersForm').submit();});$('#openAddMembers').on('click',function(){const form=$('#addMembersForm').parsley();form.validate();if(form.isValid())addModal.show();});$('#confirmAddMembers').on('click',function(){document.getElementById('addMembersForm').submit();});});})(jQuery);</script>{% endblock %}