{include file='modules/servers/puqWebHosting/templates/header.tpl'}

{*
   Vanity client dashboard. Dedicated, self-contained — never shares markup
   with the standard hosting dashboard (templates/clientarea.tpl). Two hero
   identity cards (Website + Email) each with its own Settings button:
     • Website settings → web_settings (the vanity web user is full hosting)
     • Email settings   → vanity/mailbox (single fixed mailbox: password /
                          forwards / auto-responder; quota is package-fixed)
   Webmail points at the PROVIDER mail domain ({$webmail_url}, resolved in the
   router from vanity_mail_domain). No DNS, no Mailboxes list, no Mail backups.

   Smarty vars (sharedVars): service_id, vanity_site (name.parent fqdn),
   vanity_email (name@mail_domain), webmail_url, pma_url, permissions{}.
*}

<style>
.puq-dash-bar { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:10px 14px; background:#fff; border:1px solid var(--puq-border); border-radius:var(--puq-radius); margin-bottom:12px; }
.puq-dash-bar h2 { margin:0; font-size:18px; font-weight:600; }
.puq-dash-bar .spacer { flex:1; }
.puq-dash-bar .meta { color:var(--puq-muted); font-size:11px; }

.puq-vn-hero { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:12px; margin-bottom:12px; }
.puq-vn-id .puq-card-body { display:flex; flex-direction:column; gap:10px; }
.puq-vn-addr { font-size:21px; font-weight:700; color:#2c3e50; word-break:break-all; line-height:1.25; cursor:pointer; }
.puq-vn-addr:hover { color:var(--puq-primary); }
.puq-vn-addr .fa-copy { font-size:13px; color:var(--puq-muted); margin-left:6px; }
.puq-vn-sub { color:var(--puq-muted); font-size:12px; margin-top:-4px; }
.puq-vn-btns { display:flex; flex-wrap:wrap; gap:8px; }
.puq-vn-usage { margin-top:2px; }
.puq-vn-usage .puq-usage-card { white-space:nowrap; }
.puq-usage-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:520px){ .puq-usage-grid-2 { grid-template-columns:1fr; } }
.puq-usage-card { background:#fff; border:1px solid var(--puq-border); border-radius:8px; padding:10px 12px; }
.puq-usage-card .head { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--puq-muted); }
.puq-usage-card .head i { width:24px; height:24px; border-radius:5px; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.puq-usage-card .head .label { font-weight:600; color:#444; }
.puq-usage-card .val { display:flex; align-items:baseline; gap:6px; font-size:14px; font-weight:600; margin-top:6px; }
.puq-usage-card .val .lim { font-size:12px; font-weight:400; color:var(--puq-muted); }

.puq-action-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:8px; }
.puq-action-section-label { font-size:10px; color:var(--puq-muted); text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin:10px 0 4px; }
.puq-action-section-label:first-child { margin-top:0; }
</style>

<div class="puq-dash-bar">
    <h2><i class="fa fa-circle-nodes" style="color:var(--puq-primary);"></i>
        <a class="puq-copy" data-copy="{$vanity_site|escape:'html'}" style="color:#337ab7;cursor:pointer;text-decoration:none;">{$vanity_site|escape:'html'}</a></h2>
    <span id="vn-deploy-pill"><span class="puq-shimmer" style="width:60px;"></span></span>
    <span class="spacer"></span>
    <span class="meta" id="vn-meta"></span>
</div>

<div id="vn-msg"></div>

<div class="puq-vn-hero">

    {* ---- Website identity ---- *}
    <div class="puq-card puq-vn-id">
        <div class="puq-card-header"><i class="fa fa-globe" style="color:var(--puq-primary);"></i> {$L.vn_website}</div>
        <div class="puq-card-body">
            <div class="puq-vn-addr puq-copy" data-copy="{$vanity_site|escape:'html'}" title="{$L.vn_click_to_copy}">{$vanity_site|escape:'html'} <i class="fa fa-copy"></i></div>
            <div class="puq-vn-sub">{$L.vn_website_addr_hint}</div>
            <div class="puq-vn-btns">
                <a class="puq-btn puq-btn-primary" href="http://{$vanity_site|escape:'html'}" target="_blank" rel="noopener"><i class="fa fa-external-link-alt"></i> {$L.vn_open_website}</a>
                {if $permissions.allow_hosting_settings eq 'on'}
                <a class="puq-btn puq-btn-outline" href="clientarea.php?action=productdetails&amp;id={$service_id}&amp;action_m=web_settings"><i class="fa fa-cog"></i> {$L.vn_settings}</a>
                {/if}
            </div>
            <div id="vn-web-usage" class="puq-vn-usage"><div class="puq-loader"><i class="fa fa-circle-notch fa-spin"></i></div></div>
        </div>
    </div>

    {* ---- Email identity ---- *}
    {if $vanity_email ne ''}
    <div class="puq-card puq-vn-id">
        <div class="puq-card-header"><i class="fa fa-envelope" style="color:var(--puq-success);"></i> {$L.vn_email}</div>
        <div class="puq-card-body">
            <div class="puq-vn-addr puq-copy" data-copy="{$vanity_email|escape:'html'}" title="{$L.vn_click_to_copy}">{$vanity_email|escape:'html'} <i class="fa fa-copy"></i></div>
            <div class="puq-vn-sub">{$L.vn_email_addr_hint}</div>
            <div class="puq-vn-btns">
                {if $permissions.allow_webmail_link eq 'on' and $webmail_url ne ''}
                <a class="puq-btn puq-btn-success" href="{$webmail_url|escape:'html'}" target="_blank" rel="noopener"><i class="fa fa-envelope-open-text"></i> {$L.vn_open_webmail}</a>
                {/if}
                {if $permissions.allow_change_password eq 'on' or $permissions.allow_mailbox_settings eq 'on'}
                <a class="puq-btn puq-btn-outline" href="clientarea.php?action=productdetails&amp;id={$service_id}&amp;action_m=mailbox"><i class="fa fa-cog"></i> {$L.vn_settings}</a>
                {/if}
            </div>
            <div id="vn-mail-usage" class="puq-vn-usage"><div class="puq-loader"><i class="fa fa-circle-notch fa-spin"></i></div></div>
        </div>
    </div>
    {/if}

</div>

{* ---- Quick actions ---- *}
<div class="puq-card">
    <div class="puq-card-header"><i class="fa fa-bolt" style="color:var(--puq-warning);"></i> {$L.vn_quick_actions}</div>
    <div class="puq-card-body">
        <div id="vn-actions"><div class="puq-loader"><i class="fa fa-circle-notch fa-spin"></i> {$L.vn_loading}</div></div>
    </div>
</div>

<script>window.puqServiceId = {$service_id};</script>
<script>
{literal}
(function(){
    var SID = window.puqServiceId;
    var BASE = 'clientarea.php?action=productdetails&id=' + SID;

    function fmtMB(mb){ mb=parseFloat(mb)||0; if(mb>=1024){ var g=mb/1024; return (g>=10?g.toFixed(0):g.toFixed(1))+' GB'; } return Math.round(mb)+' MB'; }
    function fmtLimMB(mb){ mb=parseFloat(mb)||0; return mb<=0?'∞':fmtMB(mb); }
    function bar(used,lim){
        used=parseFloat(used)||0; lim=parseFloat(lim)||0;
        var pct = lim>0 ? Math.min(100, Math.round(used/lim*100)) : 0;
        var col = pct>=90?'var(--puq-danger)':pct>=75?'var(--puq-warning)':'var(--puq-success)';
        return '<div class="puq-bar"><div class="puq-bar-fill" style="width:'+pct+'%;background:'+col+';"></div></div>';
    }
    function pctPill(used,lim){
        used=parseFloat(used)||0; lim=parseFloat(lim)||0;
        if(lim<=0) return '';
        var pct=Math.min(100,Math.round(used/lim*100));
        var col=pct>=90?'var(--puq-danger)':pct>=75?'var(--puq-warning)':'var(--puq-success)';
        return '<span class="pct" style="margin-left:auto;font-size:11px;color:#fff;border-radius:3px;padding:0 5px;background:'+col+';">'+pct+'%</span>';
    }
    function tile(icon,color,label,used,lim,isCount){
        var v  = isCount ? (parseInt(used||0,10)) : fmtMB(used);
        var lv = isCount ? (parseFloat(lim)>0?parseInt(lim,10):'∞') : fmtLimMB(lim);
        return '<div class="puq-usage-card">'+
            '<div class="head"><i class="fa '+icon+'" style="background:'+color+';"></i><span class="label">'+puqEsc(label)+'</span>'+pctPill(used,lim)+'</div>'+
            '<div class="val">'+v+' <span class="lim">/ '+lv+'</span></div>'+ bar(used,lim) +'</div>';
    }

    function pill(status){
        var map={active:['puq-badge-success',puqT('vn_status_active')],queued:['puq-badge-warning',puqT('vn_status_queued')],deploying:['puq-badge-warning',puqT('vn_status_deploying')],error:['puq-badge-danger',puqT('vn_status_error')]};
        var m=map[status]||['puq-badge-muted',status||'—'];
        return '<span class="puq-badge '+m[0]+'">'+puqEsc(m[1])+'</span>';
    }

    function render(d){
        $('#vn-deploy-pill').html(pill(d.deploy_status));
        var meta=[];
        if(d.servers && d.servers.web && d.servers.web.name) meta.push(puqT('vn_meta_web')+': '+d.servers.web.name);
        if(d.usage_updated) meta.push(puqT('vn_meta_updated')+': '+(d.usage_updated||'').substring(0,16));
        $('#vn-meta').text(meta.join('  ·  '));

        var p=d.permissions||{}, on=function(k){return p[k]==='on';};
        var u=d.usage||{}, l=d.limits||{}, c=d.counts||{}, links=d.links||{};
        var roles=d.package_roles||{}, hasWeb=!!roles.web, hasMail=!!roles.mail;

        // Website usage — disk + bandwidth.
        var w='<div class="puq-usage-grid-2">';
        w+=tile('fa-folder','var(--puq-primary)',puqT('vn_web_disk'), u.disk_web_mb||0, l.web_disk_quota||0, false);
        w+=tile('fa-arrow-down','var(--puq-warning)',puqT('vn_bandwidth'), u.bw_used_mb||0, l.web_bandwidth||0, false);
        w+='</div>';
        $('#vn-web-usage').html(w);

        // Mailbox usage — disk only (quota is package-fixed, shown for info).
        if($('#vn-mail-usage').length){
            $('#vn-mail-usage').html('<div class="puq-usage-grid-2">'+
                tile('fa-envelope','var(--puq-success)',puqT('vn_mail_disk'), u.disk_mail_mb||0, l.mail_disk_quota||0, false)+
            '</div>');
        }

        // Quick actions — external tools + management. NO DNS, NO mailbox list.
        var ext='', mgmt='';
        // File Manager opens via a one-time SSO handshake (fileManagerUrl),
        // NOT a static panel URL. Per-server either engine may be installed.
        var fm = (d.servers && d.servers.web && d.servers.web.file_managers) || null;
        if(on('allow_file_manager_link') && hasWeb && fm){
            if(fm.filegator)
                ext+='<button type="button" class="puq-btn puq-btn-primary puq-fm-open" data-engine="filegator"><i class="fa fa-folder-open"></i> '+puqEsc(puqT('vn_file_manager'))+'</button>';
            if(fm.net2ftp)
                ext+='<button type="button" class="puq-btn puq-btn-primary puq-fm-open" data-engine="net2ftp"><i class="fa fa-terminal"></i> '+puqEsc(puqT('vn_file_manager_chmod'))+'</button>';
        }
        if(on('allow_create_db') && hasWeb && links.phpmyadmin)
            ext+='<a class="puq-btn puq-btn-muted" href="'+puqEscAttr(links.phpmyadmin)+'" target="_blank" rel="noopener"><i class="fa fa-database"></i> phpMyAdmin</a>';

        if(on('allow_create_ftp') && hasWeb)
            mgmt+='<a class="puq-btn puq-btn-outline" href="'+BASE+'&action_m=ftp"><i class="fa fa-upload"></i> FTP <small>('+(c.ftp_accounts||0)+')</small></a>';
        if(on('allow_create_db') && hasWeb)
            mgmt+='<a class="puq-btn puq-btn-outline" href="'+BASE+'&action_m=databases"><i class="fa fa-database"></i> '+puqEsc(puqT('vn_databases'))+' <small>('+(c.databases||0)+')</small></a>';
        if(on('allow_cron_jobs') && hasWeb)
            mgmt+='<a class="puq-btn puq-btn-outline" href="'+BASE+'&action_m=cron_jobs"><i class="fa fa-clock"></i> '+puqEsc(puqT('vn_cron_jobs'))+' <small>('+(c.cron_jobs||0)+')</small></a>';
        if(on('allow_ssl_install') && (hasWeb||hasMail))
            mgmt+='<a class="puq-btn puq-btn-outline" href="'+BASE+'&action_m=custom_ssl"><i class="fa fa-lock"></i> '+puqEsc(puqT('vn_custom_ssl'))+'</a>';
        if(on('allow_backups') && hasWeb)
            mgmt+='<a class="puq-btn puq-btn-outline" href="'+BASE+'&action_m=backups"><i class="fa fa-archive"></i> '+puqEsc(puqT('vn_backups'))+' <small>('+(c.backups_web||0)+')</small></a>';
        if(on('allow_logs_view') && hasWeb)
            mgmt+='<a class="puq-btn puq-btn-outline" href="'+BASE+'&action_m=logs"><i class="fa fa-file-alt"></i> '+puqEsc(puqT('vn_logs'))+'</a>';

        var html='';
        if(ext)  html+='<div class="puq-action-section-label">'+puqEsc(puqT('vn_external_tools'))+'</div><div class="puq-action-grid">'+ext+'</div>';
        if(mgmt) html+='<div class="puq-action-section-label">'+puqEsc(puqT('vn_management'))+'</div><div class="puq-action-grid">'+mgmt+'</div>';
        if(!html) html='<div class="text-muted">'+puqEsc(puqT('vn_no_actions'))+'</div>';
        $('#vn-actions').html(html);
    }

    // File Manager — synchronous SSO handshake: backend signs creds to the
    // chosen engine and returns a one-time URL we open in a new tab.
    $(document).on('click', '.puq-fm-open', function(e){
        e.preventDefault();
        var btn=this, engine=$(btn).data('engine')||'';
        puqBtnSpin(btn,puqT('vn_opening'));
        puqClientAjax('fileManagerUrl', {engine:engine}, function(r){
            puqBtnRestore(btn);
            if(r.status==='success' && r.data && r.data.url){ window.open(r.data.url,'_blank','noopener,noreferrer'); }
            else { puqToast('error', r.msg||puqT('vn_file_manager_unavailable')); }
        }, 'POST');
    });

    function load(){
        puqClientAjax('overviewData', {}, function(r){
            if(r.status==='success' && r.data){ try{ render(r.data); }catch(e){} }
            else { $('#vn-msg').html('<div class="puq-msg puq-msg-error">'+puqEsc(r.msg||puqT('vn_could_not_load'))+'</div>'); }
        }, 'POST');
    }
    load();
})();
{/literal}
</script>
