{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Forwarders" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Forwarders" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Manage email routing configured for this hosting account." %}</div>
        </div>
        <div class="col-12 col-sm-auto"><a href="{% url 'email_forwarder_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 "Add Forwarder" %}</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 "Forwarders" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Forwarders" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Review configured addresses and their destinations." %}</p>
            </div>
            <div class="eenos-card-action-icon">
                <i data-lucide="forward"></i>
            </div>
        </div>
        <div class="table-responsive">
            <table id="mailRouteTable" class="table align-middle w-100">
                <thead>
                    <tr>
                        <th>{% translate "Email Address" %}</th>
                        <th>{% translate "Destination" %}</th>
                        <th>{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <form method="post" id="deleteRouteForm">
        {% csrf_token %}
        <input type="hidden" name="forwarder_delete" value="yes"><input type="hidden" name="domain" id="deleteRouteDomain"><input type="hidden" name="email" id="deleteRouteEmail">
    </form>
    <div class="modal fade"
         id="deleteRouteModal"
         tabindex="-1"
         aria-labelledby="deleteRouteTitle"
         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="deleteRouteTitle"><i data-lucide="trash-2"></i>{% translate "Delete Forwarder" %}</h2>
                        <div class="small text-muted mt-1">{% translate "Confirm removal of this email routing rule." %}</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="mail"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Email address" %}</div>
                            <div class="eenos-modal-info-value" id="deleteRouteAddress"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-danger mb-0">
                        <i data-lucide="triangle-alert"></i>
                        <div>
                            <strong>{% translate "This routing rule will be removed" %}</strong>
                            <div>{% translate "Messages sent to this address will no longer use the configured destination." %}</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="confirmDeleteRoute" class="btn btn-danger"><i data-lucide="trash-2"></i>{% translate "Delete" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}<script>(function($){"use strict";$(function(){let row=null;const esc=v=>$("<div>").text(v==null?"":v).html();const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById("deleteRouteModal"));const table=$("#mailRouteTable").DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'email_forwarders_data' %}",dataSrc:"data"},pageLength:25,order:[[0,"asc"]],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:"{% translate 'Loading...' %}",emptyTable:"{% translate 'No email forwarders have been configured.' %}",zeroRecords:"{% translate 'No matching email forwarders found.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[{data:"email",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:"destination",responsivePriority:2,render:v=>'<span class="font-monospace">'+esc(v)+'</span>'},{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-danger delete-route" 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-route",function(){row=JSON.parse(decodeURIComponent(this.dataset.row));$("#deleteRouteAddress").text(row.email);modal.show();});$("#confirmDeleteRoute").on("click",function(){$("#deleteRouteDomain").val(row.domain);$("#deleteRouteEmail").val(row.email);document.getElementById("deleteRouteForm").submit();});});})(jQuery);</script>{% endblock %}