{{template "base" .}}

{{define "content"}}
{{if .Announcement}}<div class="announcement">{{.Announcement}}</div>{{end}}

{{if .Subscriber}}
<!-- Authenticated subscriber — show account status -->
<section class="status-section">
    <div class="status-header">
        <div class="status-indicator">
            <span class="status-dot"></span>
            <span class="status-text">Connected</span>
        </div>
        <span class="session-badge session-badge--subscriber">{{.Subscriber.PlanName}}</span>
    </div>

    <div class="subscriber-info">
        <div class="subscriber-row">
            <span class="subscriber-label">Username</span>
            <span class="subscriber-value">{{.Subscriber.Username}}</span>
        </div>
        <div class="subscriber-row">
            <span class="subscriber-label">Plan</span>
            <span class="subscriber-value">{{.Subscriber.PlanName}}</span>
        </div>
        <div class="subscriber-row">
            <span class="subscriber-label">Download Speed</span>
            <span class="subscriber-value">{{.SpeedDown}} Mbps</span>
        </div>
        <div class="subscriber-row">
            <span class="subscriber-label">Upload Speed</span>
            <span class="subscriber-value">{{.SpeedUp}} Mbps</span>
        </div>
        <div class="subscriber-row">
            <span class="subscriber-label">IP Address</span>
            <span class="subscriber-value">{{.Subscriber.AssignedIP}}</span>
        </div>
        <div class="subscriber-row">
            <span class="subscriber-label">Expires</span>
            <span class="subscriber-value" id="expires-date">{{.ExpiresFormatted}}</span>
        </div>
        {{if .DaysRemaining}}
        <div class="subscriber-row">
            <span class="subscriber-label">Days Remaining</span>
            <span class="subscriber-value {{if le .DaysRemaining 7}}text-warning{{end}}">{{.DaysRemaining}} days</span>
        </div>
        {{end}}
    </div>

    {{if .DataUsage}}
    <div class="data-usage-card">
        <div class="data-usage-label">DATA USAGE THIS SESSION</div>
        <div class="data-usage-row">
            <div class="data-col">
                <span class="data-num">{{.DataDownload}}</span>
                <span class="data-sub">Download</span>
            </div>
            <div class="data-col">
                <span class="data-num">{{.DataUpload}}</span>
                <span class="data-sub">Upload</span>
            </div>
        </div>
    </div>
    {{end}}
</section>

{{else}}
<!-- Not authenticated — show connection instructions -->
<section class="subscriber-login">
    <div class="login-card">
        <h2>Internet Access</h2>
        <p class="login-subtitle">Connect using your PPPoE credentials</p>

        <div class="instructions">
            <div class="instruction-step">
                <span class="step-number">1</span>
                <div class="step-content">
                    <strong>Open your WiFi/Router settings</strong>
                    <p>Go to your device's network or internet settings</p>
                </div>
            </div>
            <div class="instruction-step">
                <span class="step-number">2</span>
                <div class="step-content">
                    <strong>Set connection type to PPPoE</strong>
                    <p>Look for "PPPoE" or "DSL" in your WAN/Internet settings</p>
                </div>
            </div>
            <div class="instruction-step">
                <span class="step-number">3</span>
                <div class="step-content">
                    <strong>Enter your credentials</strong>
                    <p>Use the username and password provided by your operator</p>
                </div>
            </div>
            <div class="instruction-step">
                <span class="step-number">4</span>
                <div class="step-content">
                    <strong>Connect and refresh this page</strong>
                    <p>Once connected, this page will show your account status</p>
                </div>
            </div>
        </div>

        <div class="contact-box">
            <p>Don't have an account? Contact your internet provider.</p>
        </div>
    </div>
</section>
{{end}}

<style>
.subscriber-info {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
}
.subscriber-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}
.subscriber-row:last-child { border-bottom: none; }
.subscriber-label { color: var(--text-muted); font-size: 0.85rem; }
.subscriber-value { color: var(--text-heading); font-weight: 600; font-size: 0.85rem; }
.text-warning { color: #f59e0b; }

.data-usage-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
    text-align: center;
}
.data-usage-label { color: var(--text-muted); font-size: 0.7rem; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.data-usage-row { display: flex; justify-content: space-around; }
.data-col { text-align: center; }
.data-num { display: block; font-size: 1.3rem; font-weight: 700; color: var(--text-heading); }
.data-sub { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }

.session-badge--subscriber {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.subscriber-login { margin-top: 1rem; }
.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
}
.login-card h2 { color: var(--text-heading); margin: 0 0 0.25rem 0; font-size: 1.2rem; }
.login-subtitle { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 1.5rem 0; }

.instructions { display: flex; flex-direction: column; gap: 1rem; }
.instruction-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.step-number {
    width: 28px; height: 28px; min-width: 28px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
}
.step-content strong { color: var(--text-heading); font-size: 0.85rem; display: block; }
.step-content p { color: var(--text-muted); font-size: 0.78rem; margin: 0.15rem 0 0 0; }

.contact-box {
    margin-top: 1.5rem;
    padding: 0.75rem;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    text-align: center;
}
.contact-box p { color: var(--text-muted); font-size: 0.8rem; margin: 0; }
</style>
{{end}}