{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Domain App Selector" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Domain App Selector" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Choose the application profile used by each website." %}</div>
        </div>
        <div class="col-12 col-sm-auto"><a href="{% url 'listall_domains' %}"
   class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="list"></i><span>{% translate "All Domains" %}</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 "Domains" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Domain App Selector" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="post" id="appSelectorForm" class="eenos-form eenos-card mb-4">{% csrf_token %}<div class="d-flex align-items-center justify-content-between gap-3 mb-3"><div><h2 class="eenos-panel-title mb-1">{% translate "Change Website Application" %}</h2><div class="small text-muted">{% translate "Select the application profile used to configure a website virtual host." %}</div></div><i data-lucide="blocks" class="eenos-card-action-icon"></i></div><div class="eenos-notice eenos-notice-info mb-4"><i data-lucide="info"></i><div>{% translate "Choose a profile that matches your website, such as WordPress, Django, or Joomla. The Default Application profile serves a standard HTML or PHP website." %}</div></div><div class="row g-3"><div class="col-md-6"><label class="form-label" for="appDomain">{% translate "Website" %}</label><select id="appDomain"
        class="form-select eenos-select-search"
        name="domain"
        required
        data-parsley-required-message="{% translate 'Please select a domain name.' %}"><option value="">{% translate "Select a website" %}</option><optgroup label="{% translate 'Primary Domain' %}"><option value="{{ main_domain }}"
        {% if form.domain.value == main_domain %} selected{% endif %}>{{ main_domain }}</option></optgroup>{% if addon_domains %}<optgroup label="{% translate 'Addon Domains' %}">{% for domain in addon_domains %}<option value="{{ domain }}"
        {% if form.domain.value == domain %} selected{% endif %}>{{ domain }}</option>{% endfor %}</optgroup>{% endif %}{% if parked_domains %}<optgroup label="{% translate 'Alias Domains' %}">{% for domain in parked_domains %}<option value="{{ domain }}"
        {% if form.domain.value == domain %} selected{% endif %}>{{ domain }}</option>{% endfor %}</optgroup>{% endif %}</select></div><div class="col-md-6"><label class="form-label" for="domainApp">{% translate "Application" %}</label><select id="domainApp"
        class="form-select eenos-select-search"
        name="app"
        required
        data-parsley-required-message="{% translate 'Please select an application.' %}"><option value="">{% translate "Select an application" %}</option><option value="default"
        {% if form.app.value == "default" %} selected{% endif %}>{% translate "Default Application" %}</option>{% for app, info in apps.items %}<option value="{{ app }}"{% if form.app.value == app %} selected{% endif %}>{{ info.info }}</option>{% endfor %}</select></div></div><button type="submit"
        class="btn btn-primary d-inline-flex align-items-center gap-2 mt-4"
        name="set_domain_app"
        value="yes"><i data-lucide="save"></i> {% translate "Save Application" %}</button></form>
    <div class="eenos-card">
        <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
            <div>
                <h2 class="eenos-panel-title mb-1">{% translate "Website Applications" %}</h2>
                <div class="small text-muted">{% translate "Review and change the application profile assigned to each website." %}</div>
            </div>
            <i data-lucide="blocks" class="eenos-card-action-icon"></i>
        </div>
        <div class="table-responsive">
            <table id="domainsTable" class="table align-middle w-100">
                <thead>
                    <tr>
                        <th>{% translate "Domain" %}</th>
                        <th>{% translate "Document Root" %}</th>
                        <th>{% translate "Application" %}</th>
                        <th>{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <form method="post" id="changeDomainAppForm" class="eenos-form">
        {% csrf_token %}
        <input type="hidden" name="set_domain_app" value="yes">
        <input type="hidden" id="changeAppDomain" name="domain">
        <div class="modal fade"
             id="changeDomainAppModal"
             tabindex="-1"
             aria-labelledby="changeDomainAppTitle"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="changeDomainAppTitle">{% translate "Change Website Application" %}</h2>
                        <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="globe-2"></i>
                            </div>
                            <div class="eenos-modal-info-content min-w-0">
                                <div class="eenos-modal-info-label">{% translate "Selected website" %}</div>
                                <div class="eenos-modal-info-value">
                                    <a id="changeAppDomainLink"
                                       class="d-inline-flex align-items-center gap-1 fw-semibold text-break"
                                       href="#"
                                       target="_blank"
                                       rel="noopener noreferrer">
                                        <span id="changeAppDomainName"></span>
                                        <i data-lucide="external-link"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="eenos-notice eenos-notice-info mb-4">
                            <i data-lucide="blocks"></i>
                            <div>
                                <strong>{% translate "Current application" %}</strong>
                                <div class="mt-1">
                                    <span id="changeAppCurrent" class="badge eenos-badge-info"></span>
                                </div>
                            </div>
                        </div>
                        <label class="form-label" for="changeAppValue">{% translate "New Application" %}</label>
                        <select id="changeAppValue"
                                class="form-select eenos-select-search"
                                name="app"
                                required
                                data-parsley-required-message="{% translate 'Please select an application.' %}">
                            <option value="">{% translate "Select an application" %}</option>
                            <option value="default">{% translate "Default Application" %}</option>
                            {% for app, info in apps.items %}<option value="{{ app }}">{{ info.info }}</option>{% endfor %}
                        </select>
                        <div class="form-text">{% translate "Choose the application profile that matches this website." %}</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                        <button type="submit"
                                class="btn btn-primary d-inline-flex align-items-center gap-2">
                            <i data-lucide="save"></i>
                            <span>{% translate "Save Application" %}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}
{% block extra_js %}<script>$(function(){const escapeHtml=value=>$("<div>").text(value==null?"":String(value)).html();const t=$("#domainsTable").DataTable({processing: true,ajax:{url:"{% url 'domain_apps_data' %}",dataSrc:"data"},pageLength:25,language: {lengthMenu: "{% translate "_MENU_ Rows per page" %}", loadingRecords: "&nbsp;", processing: "{% translate "Loading..." %}", emptyTable: "{% translate "No domains have been configured." %}", zeroRecords: "{% translate "No matching domains found." %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},order:[[0,"asc"]],columns:[{data:"domain",width:"28%",className:"text-nowrap",responsivePriority:1,render:(domain,type,row)=>type==="display"?'<a class="d-inline-flex align-items-center gap-1 text-decoration-none" href="'+escapeHtml(row.site_url||("https://"+domain))+'" target="_blank" rel="noopener noreferrer"><i data-lucide="external-link"></i><span>'+escapeHtml(domain)+'</span></a>':domain},{data:"document_root",responsivePriority:2,render:(root,type)=>type==="display"?'<span class="d-inline-flex align-items-center gap-1 font-monospace"><i data-lucide="home"></i><span>/'+escapeHtml(root)+'</span></span>':root},{data:"app_info",responsivePriority:2,render:(app,type,row)=>{if(type!=="display")return app;return '<span class="d-inline-flex align-items-center gap-2"><span>'+escapeHtml(app)+'</span>'+(row.app==="default"?'<span class="badge eenos-badge-neutral">{% translate "Default" %}</span>':" ")+'</span>'}},{data:null,orderable:false,searchable:false,width:"70px",className:"text-end text-nowrap",responsivePriority:1,render:(data,type,row)=>type==="display"?'<div class="eenos-dt-actions justify-content-end"><button type="button" class="btn btn-sm btn-outline-primary select-domain-app" data-domain="'+escapeHtml(row.domain)+'" data-app="'+escapeHtml(row.app)+'" data-app-info="'+escapeHtml(row.app_info)+'" title="{% translate 'Change application' %}" aria-label="{% translate 'Change application' %}"><i data-lucide="pencil"></i></button></div>':""}]});t.on("draw responsive-display",()=>lucide.createIcons());document.addEventListener("click",event=>{const button=event.target.closest(".select-domain-app");if(!button)return;const value=button.dataset.app||"default",select=document.getElementById("changeAppValue"),wrapper=select.closest(".eenos-select-search-wrapper"),option=Array.from(select.options).find(item=>item.value===value);document.getElementById("changeAppDomain").value=button.dataset.domain;document.getElementById("changeAppDomainName").textContent=button.dataset.domain;document.getElementById("changeAppDomainLink").href="https://"+button.dataset.domain;document.getElementById("changeAppCurrent").textContent=button.dataset.appInfo||button.dataset.app||"{% translate 'Default Application' %}";if(option){select.value=value;select.dispatchEvent(new Event("change",{bubbles:true}));if(wrapper){const visibleButton=wrapper.querySelector(".eenos-select-search-button");if(visibleButton)visibleButton.textContent=option.text.trim();wrapper.querySelectorAll(".eenos-select-search-option").forEach(item=>item.classList.toggle("active",item.dataset.value===value))}}if(typeof lucide!=="undefined")lucide.createIcons();bootstrap.Modal.getOrCreateInstance(document.getElementById("changeDomainAppModal")).show()});});</script>{% endblock %}