{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Mail Exchange Server" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Mail Exchange Server" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Choose whether each domain receives mail locally or through an external mail server." %}</div>
        </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 "Mail Exchange Server" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Email Routing" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Use Local when this server handles the domain's mail. Select Remote when mail is delivered by an external provider." %}</p>
            </div>
            <div class="eenos-card-action-icon">
                <i data-lucide="server-cog"></i>
            </div>
        </div>
        <div class="table-responsive">
            <table id="exchangeTable" class="table align-middle w-100">
                <thead>
                    <tr>
                        <th>{% translate "Domain" %}</th>
                        <th>{% translate "Mail Exchanger" %}</th>
                        <th>{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <form method="post" id="changeExchangeForm">
        {% csrf_token %}
        <input type="hidden" name="swith_mail_server" value="yes">
        <input type="hidden" name="domain" id="exchangeDomain">
        <input type="hidden" name="server" id="exchangeServer">
    </form>
    <div class="modal fade"
         id="changeExchangeModal"
         tabindex="-1"
         aria-labelledby="changeExchangeTitle"
         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="changeExchangeTitle"><i data-lucide="server-cog"></i>{% translate "Change Mail Exchange Server" %}</h2>
                        <div class="small text-muted mt-1">{% translate "Review the routing change before continuing." %}</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-3">
                        <div class="eenos-modal-info-icon">
                            <i data-lucide="globe-2"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Domain" %}</div>
                            <div class="eenos-modal-info-value" id="exchangeDomainLabel"></div>
                        </div>
                    </div>
                    <div class="eenos-modal-info mb-4">
                        <div class="eenos-modal-info-icon">
                            <i data-lucide="mail-check"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "New mail exchanger" %}</div>
                            <div class="eenos-modal-info-value" id="exchangeServerLabel"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-warning mb-0">
                        <i data-lucide="triangle-alert"></i>
                        <div>
                            <strong>{% translate "Mail delivery will change" %}</strong>
                            <div id="exchangeWarning"></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="confirmExchangeChange" class="btn btn-primary"><i data-lucide="repeat-2"></i>{% translate "Switch Mail Server" %}</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 localLabel="{% translate 'Local Mail Exchanger' %}";const remoteLabel="{% translate 'Remote Mail Exchanger' %}";const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('changeExchangeModal'));const table=$('#exchangeTable').DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'email_exchanges_data' %}",dataSrc:'data'},pageLength:25,order:[[0,'asc']],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:'{% translate "Loading..." %}',zeroRecords:"{% translate 'No matching domains found.' %}",emptyTable:"{% translate 'No email domains are available.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[{data:'domain',width:'35%',responsivePriority:1,className:'text-nowrap',render:(v,t)=>t==='display'?'<span class="d-inline-flex align-items-center gap-2"><i data-lucide="globe-2"></i><span>'+esc(v)+'</span></span>':v},{data:'server',width:'40%',responsivePriority:2,render:(v,t)=>t==='display'?(v==='local'?'<span class="badge eenos-badge-success d-inline-flex align-items-center gap-1"><i data-lucide="server"></i><span>'+localLabel+'</span></span>':'<span class="badge eenos-badge-primary d-inline-flex align-items-center gap-1"><i data-lucide="cloud"></i><span>'+remoteLabel+'</span></span>'):v},{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"><button type="button" class="btn btn-sm '+(r.next_server==='local'?'btn-outline-success':'btn-outline-primary')+' change-exchange" data-row="'+encodeURIComponent(JSON.stringify(r))+'" title="{% translate 'Change mail exchanger' %}"><i data-lucide="repeat-2"></i></button></div>':''}],drawCallback:()=>lucide.createIcons()});table.on('responsive-display',()=>lucide.createIcons());$(document).on('click','.change-exchange',function(){selected=JSON.parse(decodeURIComponent(this.dataset.row));const toLocal=selected.next_server==='local';$('#exchangeDomainLabel').text(selected.domain);$('#exchangeServerLabel').text(toLocal?localLabel:remoteLabel);$('#exchangeWarning').text(toLocal?"{% translate 'This server will accept and deliver email for the domain.' %}":"{% translate 'This server will stop accepting local delivery for the domain. Confirm that external mail routing is configured.' %}");modal.show();});$('#confirmExchangeChange').on('click',function(){$('#exchangeDomain').val(selected.domain);$('#exchangeServer').val(selected.next_server);document.getElementById('changeExchangeForm').submit();});});})(jQuery);</script>
{% endblock %}