{**
 * KeyHelp Manager - Client Area Template
 *
 * Zeigt Login-Details und Account-Statistiken für Kunden an
 *}

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            <i class="fas fa-server"></i> KeyHelp Hosting Account
        </h3>
    </div>
    <div class="panel-body">

        {if $error}
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle"></i> {$error}
            </div>
        {else}

            {* Login-Informationen *}
            <div class="row">
                <div class="col-md-12">
                    <h4><i class="fas fa-sign-in-alt"></i> Login-Informationen</h4>
                    <hr>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-4 text-right">
                    <strong>KeyHelp Login-URL:</strong>
                </div>
                <div class="col-sm-8">
                    <a href="{$login_url}" target="_blank" class="btn btn-success btn-sm">
                        <i class="fas fa-external-link-alt"></i> {$login_url}
                    </a>
                </div>
            </div>

            <div class="row" style="margin-top: 10px;">
                <div class="col-sm-4 text-right">
                    <strong>Benutzername:</strong>
                </div>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input type="text" class="form-control" value="{$username}" readonly id="kh-username">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" onclick="copyToClipboard('kh-username')" title="Kopieren">
                                <i class="fas fa-copy"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>

            <div class="row" style="margin-top: 10px;">
                <div class="col-sm-4 text-right">
                    <strong>Passwort:</strong>
                </div>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input type="password" class="form-control" value="{$password}" readonly id="kh-password">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" onclick="togglePassword('kh-password')" title="Anzeigen/Verbergen">
                                <i class="fas fa-eye" id="kh-password-icon"></i>
                            </button>
                            <button class="btn btn-default" type="button" onclick="copyToClipboard('kh-password')" title="Kopieren">
                                <i class="fas fa-copy"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>

            <div class="row" style="margin-top: 10px;">
                <div class="col-sm-4 text-right">
                    <strong>Domain:</strong>
                </div>
                <div class="col-sm-8">
                    <code>{$domain}</code>
                </div>
            </div>

            {* Account-Statistiken *}
            {if $stats}
                <div class="row" style="margin-top: 30px;">
                    <div class="col-md-12">
                        <h4><i class="fas fa-chart-bar"></i> Account-Statistiken</h4>
                        <hr>
                    </div>
                </div>

                {* Speicherplatz *}
                {if $stats.disk_used}
                    <div class="row" style="margin-top: 15px;">
                        <div class="col-sm-4 text-right">
                            <strong>Speicherplatz:</strong>
                        </div>
                        <div class="col-sm-8">
                            <div class="progress" style="margin-bottom: 5px;">
                                <div class="progress-bar {if $stats.disk_percent >= 90}progress-bar-danger{elseif $stats.disk_percent >= 75}progress-bar-warning{else}progress-bar-success{/if}"
                                     role="progressbar"
                                     aria-valuenow="{$stats.disk_percent}"
                                     aria-valuemin="0"
                                     aria-valuemax="100"
                                     style="width: {$stats.disk_percent}%">
                                    {$stats.disk_percent}%
                                </div>
                            </div>
                            <small class="text-muted">
                                {$stats.disk_used} von {$stats.disk_limit} verwendet
                            </small>
                        </div>
                    </div>
                {/if}

                {* Bandbreite / Traffic *}
                {if $stats.bandwidth_used}
                    <div class="row" style="margin-top: 15px;">
                        <div class="col-sm-4 text-right">
                            <strong>Traffic (Monat):</strong>
                        </div>
                        <div class="col-sm-8">
                            <div class="progress" style="margin-bottom: 5px;">
                                <div class="progress-bar {if $stats.bandwidth_percent >= 90}progress-bar-danger{elseif $stats.bandwidth_percent >= 75}progress-bar-warning{else}progress-bar-info{/if}"
                                     role="progressbar"
                                     aria-valuenow="{$stats.bandwidth_percent}"
                                     aria-valuemin="0"
                                     aria-valuemax="100"
                                     style="width: {$stats.bandwidth_percent}%">
                                    {$stats.bandwidth_percent}%
                                </div>
                            </div>
                            <small class="text-muted">
                                {$stats.bandwidth_used} von {$stats.bandwidth_limit} verwendet
                            </small>
                        </div>
                    </div>
                {/if}

                {* Weitere Statistiken *}
                <div class="row" style="margin-top: 20px;">
                    <div class="col-sm-4 col-xs-6 text-center">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <h3 class="text-primary" style="margin: 0;">
                                    <i class="fas fa-globe"></i> {$stats.domains}
                                </h3>
                                <small class="text-muted">Domains</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-6 text-center">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <h3 class="text-success" style="margin: 0;">
                                    <i class="fas fa-database"></i> {$stats.databases}
                                </h3>
                                <small class="text-muted">Datenbanken</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-12 text-center">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <h3 class="text-info" style="margin: 0;">
                                    <i class="fas fa-envelope"></i> {$stats.email_accounts}
                                </h3>
                                <small class="text-muted">E-Mail-Konten</small>
                            </div>
                        </div>
                    </div>
                </div>
            {/if}

            {* Schnellzugriff-Button *}
            <div class="row" style="margin-top: 20px;">
                <div class="col-md-12 text-center">
                    <a href="{$login_url}" target="_blank" class="btn btn-primary btn-lg">
                        <i class="fas fa-sign-in-alt"></i> Jetzt zu KeyHelp einloggen
                    </a>
                </div>
            </div>

        {/if}

    </div>
</div>

{* JavaScript für Funktionalität *}
<script type="text/javascript">
    function togglePassword(fieldId) {
        var field = document.getElementById(fieldId);
        var icon = document.getElementById(fieldId + '-icon');

        if (field.type === "password") {
            field.type = "text";
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            field.type = "password";
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }

    function copyToClipboard(fieldId) {
        var field = document.getElementById(fieldId);
        field.select();
        field.setSelectionRange(0, 99999); // Für mobile Geräte

        try {
            document.execCommand('copy');

            // Visuelles Feedback
            var btn = event.target.closest('button');
            var originalHTML = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-check"></i>';
            btn.classList.add('btn-success');

            setTimeout(function() {
                btn.innerHTML = originalHTML;
                btn.classList.remove('btn-success');
            }, 1500);
        } catch (err) {
            alert('Kopieren fehlgeschlagen. Bitte manuell kopieren.');
        }

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

<style>
    .panel {
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .input-group-btn button {
        border-left: 0;
    }

    .progress {
        height: 24px;
    }

    .progress-bar {
        line-height: 24px;
        font-weight: bold;
    }

    @media (max-width: 768px) {
        .text-right {
            text-align: left !important;
            margin-bottom: 5px;
        }
    }
</style>