{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Mailing List Members" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Mailing List Members" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Review members and manage their Mailman roles." %}</div>
        </div>
        <div class="col-12 col-sm-auto d-flex flex-column flex-sm-row gap-2"><a href="{% url 'email_mailman' %}"
   class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2"><i data-lucide="list"></i><span>{% translate "Mailing Lists" %}</span></a><a href="{{ listurl }}settings/"
   target="_blank"
   rel="noopener"
   class="btn btn-primary d-flex align-items-center justify-content-center gap-2"><i data-lucide="settings"></i><span>{% translate "Mailman Settings" %}</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_mailman' %}">{% translate "Mailing Lists" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Members" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card mb-4"><div class="eenos-card-header mb-0"><div><div class="eenos-panel-title">{% translate "Mailing List" %}</div><div class="eenos-panel-subtitle">{% translate "Role changes on this page apply to the mailing list shown below." %}</div></div><div class="eenos-card-action-icon"><i data-lucide="list"></i></div></div><div class="eenos-modal-info mt-3"><div class="eenos-modal-info-icon"><i data-lucide="mail"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Posting address" %}</div><div class="eenos-modal-info-value"><a href="{{ listurl }}" target="_blank" rel="noopener">{{ dlist }} <i data-lucide="external-link"></i></a></div></div></div></div>
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Members" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Member subscriptions are managed by Mailman; use this page to change membership roles." %}</p>
            </div>
            <div class="eenos-card-action-icon">
                <i data-lucide="users"></i>
            </div>
        </div>
        <div class="table-responsive">
            <table id="mailmanMembersTable" class="table align-middle w-100">
                <thead>
                    <tr>
                        <th>{% translate "Member" %}</th>
                        <th>{% translate "Role" %}</th>
                        <th>{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <form method="post" id="roleChangeForm">
        {% csrf_token %}
        <input type="hidden" name="change_member_role" value="yes"><input type="hidden" name="member" id="roleMember"><input type="hidden" name="nrole" id="newMemberRole"><input type="hidden" name="crole" id="currentMemberRole">
    </form>
    <div class="modal fade"
         id="roleChangeModal"
         tabindex="-1"
         aria-labelledby="roleChangeTitle"
         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="roleChangeTitle"><i data-lucide="user-cog"></i>{% translate "Change Member Role" %}</h2>
                        <div class="small text-muted mt-1">{% translate "Choose the member's responsibility in this mailing 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="user"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Member" %}</div>
                            <div class="eenos-modal-info-value" id="roleMemberLabel"></div>
                        </div>
                    </div>
                    <form id="roleSelectionForm" class="eenos-form">
                        <fieldset>
                            <legend class="form-label">{% translate "Membership Role" %}</legend>
                            <div class="d-grid gap-3">
                                <label class="form-check">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="selected_role"
                                           value="member"
                                           required>
                                    <span class="form-check-label"><strong>{% translate "Member" %}</strong><span class="d-block small text-muted">{% translate "Receives and participates in list messages." %}</span></span>
                                </label>
                                <label class="form-check">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="selected_role"
                                           value="moderator"
                                           required>
                                    <span class="form-check-label"><strong>{% translate "Moderator" %}</strong><span class="d-block small text-muted">{% translate "Helps review and moderate list activity." %}</span></span>
                                </label>
                                <label class="form-check">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="selected_role"
                                           value="owner"
                                           required>
                                    <span class="form-check-label"><strong>{% translate "Administrator / Owner" %}</strong><span class="d-block small text-muted">{% translate "Has administrative responsibility for the list." %}</span></span>
                                </label>
                            </div>
                        </fieldset>
                        <div id="sameRoleWarning"
                             class="eenos-notice eenos-notice-warning mt-3 d-none">
                            <i data-lucide="circle-alert"></i>
                            <div>{% translate "Select a role different from the member's current role." %}</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="confirmRoleChange" class="btn btn-primary"><i data-lucide="save"></i>{% translate "Change Role" %}</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 labels={owner:"{% translate 'Owner' %}",moderator:"{% translate 'Moderator' %}",member:"{% translate 'Member' %}"};const badges={owner:'eenos-badge-success',moderator:'eenos-badge-info',member:'eenos-badge-neutral'};const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('roleChangeModal'));const table=$('#mailmanMembersTable').DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'email_mailman_members_data' %}",data:{dlist:"{{ dlist|escapejs }}"},dataSrc:'data'},pageLength:25,order:[[0,'asc']],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:"{% translate 'Loading...' %}",zeroRecords:"{% translate 'No matching mailing-list members found.' %}",emptyTable:"{% translate 'No members were returned by Mailman.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[{data:'email',responsivePriority:1,render:(v,t,r)=>t==='display'?'<div class="d-flex align-items-center gap-2"><span><a href="mailto:'+esc(v)+'">'+esc(r.name||v)+'</a>'+(r.name?'<span class="d-block small text-muted">'+esc(v)+'</span>':'')+'</span>'+(r.settings_url?'<span class="eenos-dt-actions"><a href="'+esc(r.settings_url)+'" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary" title="{% translate 'Member settings' %}" aria-label="{% translate 'Member settings' %}"><i data-lucide="settings"></i></a></span>':'')+'</div>':v},{data:'role',responsivePriority:2,render:(v,t)=>t==='display'?'<span class="eenos-badge '+(badges[v]||badges.member)+'">'+esc(labels[v]||v)+'</span>':v},{data:null,orderable:false,searchable:false,responsivePriority:1,className:'text-end',render:(d,t,r)=>t==='display'?'<div class="eenos-dt-actions justify-content-end"><button type="button" class="btn btn-sm btn-outline-primary change-member-role" data-row="'+encodeURIComponent(JSON.stringify(r))+'" title="{% translate 'Change role' %}"><i data-lucide="user-cog"></i></button></div>':''}],drawCallback:()=>lucide.createIcons()});table.on('responsive-display',()=>lucide.createIcons());$(document).on('click','.change-member-role',function(){selected=JSON.parse(decodeURIComponent(this.dataset.row));$('#roleMemberLabel').text(selected.email);$('input[name="selected_role"][value="'+selected.role+'"]').prop('checked',true);$('#sameRoleWarning').addClass('d-none');modal.show();});$('input[name="selected_role"]').on('change',function(){$('#sameRoleWarning').toggleClass('d-none',this.value!==selected.role);});$('#confirmRoleChange').on('click',function(){const form=$('#roleSelectionForm').parsley();form.validate();if(!form.isValid())return;const role=$('input[name="selected_role"]:checked').val();if(role===selected.role){$('#sameRoleWarning').removeClass('d-none');return;}$('#roleMember').val(selected.email);$('#currentMemberRole').val(selected.role);$('#newMemberRole').val(role);document.getElementById('roleChangeForm').submit();});});})(jQuery);</script>{% endblock %}