{**
 * KeyHelp Manager - Modern Client Area Template
 * @author Kevin Feiler / AVVGO
 * @copyright 2024 Kevin Feiler / AVVGO
 *}

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
    .kh-container {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        max-width: 100%;
        margin: 0;
    }

    .kh-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 16px;
        padding: 32px;
        color: white;
        margin-bottom: 24px;
        box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
        position: relative;
        overflow: hidden;
    }

    .kh-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transform: translate(50%, -50%);
    }

    .kh-card-title {
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 8px 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .kh-card-subtitle {
        font-size: 14px;
        opacity: 0.9;
        margin: 0;
    }

    .kh-login-btn {
        background: white;
        color: #667eea;
        border: none;
        padding: 14px 28px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 15px;
        margin-top: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .kh-login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        color: #667eea;
        text-decoration: none;
    }

    .kh-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-top: 24px;
    }

    .kh-info-card {
        background: white;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        border: 1px solid #e5e7eb;
        transition: all 0.3s ease;
    }

    .kh-info-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

    .kh-info-label {
        font-size: 13px;
        color: #6b7280;
        font-weight: 500;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .kh-info-value {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .kh-info-input {
        flex: 1;
        border: 2px solid #e5e7eb;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 14px;
        font-family: 'SF Mono', Monaco, monospace;
        transition: all 0.2s ease;
        background: #f9fafb;
    }

    .kh-info-input:focus {
        outline: none;
        border-color: #667eea;
        background: white;
    }

    .kh-icon-btn {
        background: #f3f4f6;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b7280;
    }

    .kh-icon-btn:hover {
        background: #667eea;
        color: white;
        transform: scale(1.05);
    }

    .kh-icon-btn.success {
        background: #10b981;
        color: white;
    }

    .kh-stats-section {
        margin-top: 24px;
    }

    .kh-stats-title {
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .kh-stat-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        border: 1px solid #e5e7eb;
        margin-bottom: 16px;
    }

    .kh-stat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .kh-stat-label {
        font-size: 14px;
        font-weight: 600;
        color: #374151;
    }

    .kh-stat-value {
        font-size: 13px;
        color: #6b7280;
        font-family: 'SF Mono', Monaco, monospace;
    }

    .kh-progress-bar {
        height: 8px;
        background: #e5e7eb;
        border-radius: 100px;
        overflow: hidden;
        position: relative;
    }

    .kh-progress-fill {
        height: 100%;
        border-radius: 100px;
        transition: width 0.6s ease;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        position: relative;
        overflow: hidden;
    }

    .kh-progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    .kh-progress-fill.warning {
        background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    }

    .kh-progress-fill.danger {
        background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    }

    .kh-metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 16px;
        margin-top: 20px;
    }

    .kh-metric {
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        border: 1px solid #d1d5db;
    }

    .kh-metric-value {
        font-size: 32px;
        font-weight: 700;
        color: #667eea;
        margin-bottom: 4px;
    }

    .kh-metric-label {
        font-size: 13px;
        color: #6b7280;
        font-weight: 500;
    }

    .kh-error {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        border: 1px solid #fca5a5;
        color: #991b1b;
        padding: 16px 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .kh-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 100px;
        font-size: 12px;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.2);
        margin-left: 8px;
    }

    @media (max-width: 768px) {
        .kh-card {
            padding: 24px;
        }

        .kh-info-grid {
            grid-template-columns: 1fr;
        }

        .kh-stat-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
        }
    }
</style>

<div class="kh-container">
    {if $error}
        <div class="kh-error">
            <svg width="24" height="24" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
            </svg>
            <div>{$error}</div>
        </div>
    {else}
        <div class="kh-card">
            <div class="kh-card-title">
                <svg width="32" height="32" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
                </svg>
                KeyHelp Hosting
                <span class="kh-badge">ACTIVE</span>
            </div>
            <p class="kh-card-subtitle">
                {$domain}
                {if $template_name}
                    <span class="kh-badge">📋 {$template_name}</span>
                {/if}
            </p>
            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
                <a href="{$login_url}" target="_blank" class="kh-login-btn">
                    <svg width="18" height="18" fill="currentColor" viewBox="0 0 20 20" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
                        <path fill-rule="evenodd" d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clip-rule="evenodd"/>
                    </svg>
                    Open Control Panel
                </a>
                {if $panel_url}
                    <a href="{$panel_url}" target="_blank" class="kh-login-btn" style="background: rgba(255,255,255,0.2); color: white;">
                        <svg width="18" height="18" fill="currentColor" viewBox="0 0 20 20" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
                            <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
                        </svg>
                        Admin Panel
                    </a>
                {/if}
            </div>
        </div>

        <div class="kh-info-grid">
            <div class="kh-info-card">
                <div class="kh-info-label">Username</div>
                <div class="kh-info-value">
                    <input type="text" class="kh-info-input" value="{$username}" readonly id="kh-username">
                    <button class="kh-icon-btn" onclick="copyToClipboard('kh-username')" title="Copy">
                        <svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/>
                            <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"/>
                        </svg>
                    </button>
                </div>
            </div>

            <div class="kh-info-card">
                <div class="kh-info-label">Password</div>
                <div class="kh-info-value">
                    <input type="password" class="kh-info-input" value="{$password}" readonly id="kh-password">
                    <button class="kh-icon-btn" onclick="togglePassword()" title="Show/Hide">
                        <svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20" id="eye-icon">
                            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
                            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                    <button class="kh-icon-btn" onclick="copyToClipboard('kh-password')" title="Copy">
                        <svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/>
                            <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        {if $stats}
            <div class="kh-stats-section">
                <div class="kh-stats-title">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
                    </svg>
                    Resource Usage
                </div>

                <div class="kh-stat-card">
                    <div class="kh-stat-header">
                        <span class="kh-stat-label">💾 Disk Space</span>
                        <span class="kh-stat-value">{$stats.disk_used_formatted} / {$stats.disk_limit_formatted}</span>
                    </div>
                    <div class="kh-progress-bar">
                        <div class="kh-progress-fill {if $stats.disk_percent >= 90}danger{elseif $stats.disk_percent >= 75}warning{/if}" style="width: {$stats.disk_percent}%"></div>
                    </div>
                </div>

                <div class="kh-stat-card">
                    <div class="kh-stat-header">
                        <span class="kh-stat-label">📊 Bandwidth</span>
                        <span class="kh-stat-value">{$stats.bandwidth_used_formatted} / {$stats.bandwidth_limit_formatted}</span>
                    </div>
                    <div class="kh-progress-bar">
                        <div class="kh-progress-fill {if $stats.bandwidth_percent >= 90}danger{elseif $stats.bandwidth_percent >= 75}warning{/if}" style="width: {$stats.bandwidth_percent}%"></div>
                    </div>
                </div>

                <div class="kh-metrics-grid">
                    <div class="kh-metric">
                        <div class="kh-metric-value">{$stats.domains}</div>
                        <div class="kh-metric-label">🌐 Domains</div>
                    </div>
                    <div class="kh-metric">
                        <div class="kh-metric-value">{$stats.databases}</div>
                        <div class="kh-metric-label">🗄️ Databases</div>
                    </div>
                    <div class="kh-metric">
                        <div class="kh-metric-value">{$stats.email_accounts}</div>
                        <div class="kh-metric-label">📧 Email Accounts</div>
                    </div>
                </div>
            </div>
        {/if}
    {/if}
</div>

<script>
    function togglePassword() {
        const field = document.getElementById('kh-password');
        const icon = document.getElementById('eye-icon');

        if (field.type === 'password') {
            field.type = 'text';
            icon.innerHTML = '<path d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"/><path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"/>';
        } else {
            field.type = 'password';
            icon.innerHTML = '<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>';
        }
    }

    function copyToClipboard(fieldId) {
        const field = document.getElementById(fieldId);
        const button = event.currentTarget;

        field.select();
        field.setSelectionRange(0, 99999);

        try {
            document.execCommand('copy');

            button.classList.add('success');
            button.innerHTML = '<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';

            setTimeout(() => {
                button.classList.remove('success');
                button.innerHTML = '<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/><path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"/></svg>';
            }, 2000);
        } catch (err) {
            console.error('Copy failed:', err);
        }

        window.getSelection().removeAllRanges();
    }
</script>