{{template "base" .}}

{{define "content"}}
{{if .Announcement}}<div class="announcement">{{.Announcement}}</div>{{end}}
<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--{{.Session.Type}}">{{.Session.Type}}</span>
    </div>

    <div class="timer-card">
        <div class="timer-label">REMAINING TIME</div>
        <div class="timer-row">
            <div class="timer-col">
                <span class="timer-num" id="timer-hours">00</span>
                <span class="timer-sub" id="timer-hours-label">HR</span>
            </div>
            <span class="timer-colon">:</span>
            <div class="timer-col">
                <span class="timer-num" id="timer-minutes">00</span>
                <span class="timer-sub" id="timer-minutes-label">MIN</span>
            </div>
            <span class="timer-colon">:</span>
            <div class="timer-col">
                <span class="timer-num" id="timer-seconds">00</span>
                <span class="timer-sub" id="timer-seconds-label">SEC</span>
            </div>
        </div>
    </div>

    {{if .Session.DataLimitBytes}}
    <div class="data-card">
        <div class="data-label">DATA USAGE</div>
        <div class="data-bar-container">
            <div class="data-bar" id="data-bar" style="width: 0%"></div>
        </div>
        <div class="data-text">
            <span id="data-used-text">0 MB</span> / <span id="data-limit-text">0 MB</span>
        </div>
    </div>
    <input type="hidden" id="data-used-bytes" value="{{.Session.DataUsedBytes}}">
    <input type="hidden" id="data-limit-bytes" value="{{.Session.DataLimitBytes}}">
    {{end}}

    {{if .Session.SpeedDownKbps}}
    <div class="info-card">
        <div class="info-row">
            <span class="info-label">Speed</span>
            <span class="info-value">{{.Session.SpeedDownKbps}} Kbps</span>
        </div>
    </div>
    {{end}}

    <div class="action-stack">
        <button type="button" class="btn btn-success btn-lg" id="insert-money-btn">
            &#8369; Insert Money
        </button>
        <button type="button" class="btn btn-outline btn-lg" id="pause-btn">
            <span id="pause-label">{{if .Session.IsPaused}}&#9654; Resume{{else}}&#10074;&#10074; Pause{{end}}</span>
        </button>
    </div>

    <form id="voucher-form" class="voucher-row">
        <input type="text" name="code" id="voucher-code"
               class="voucher-input"
               placeholder="Voucher code"
               autocomplete="off" required>
        <button type="submit" class="btn btn-accent btn-voucher">Redeem</button>
    </form>
</section>

<!-- Coin Insert Modal -->
<div class="coin-modal" id="coin-modal">
    <div class="coin-modal-content">
        <div class="coin-modal-title">INSERT COIN NOW</div>
        <div class="coin-modal-countdown" id="coin-modal-countdown">60</div>
        <div class="coin-modal-countdown-label">SECONDS REMAINING</div>
        <div class="coin-modal-status">
            <span class="coin-modal-pulse"></span>
            <span id="coin-modal-status-text">Waiting for coins...</span>
        </div>
        <div class="coin-modal-amount">
            <div class="coin-modal-amount-value" id="coin-modal-amount">&#8369;0.00</div>
            <div class="coin-modal-amount-label">AMOUNT INSERTED</div>
        </div>
        <button type="button" class="coin-modal-mute" id="coin-modal-mute-btn" title="Mute/Unmute">
            <span id="coin-modal-mute-icon">&#128266;</span>
        </button>
        <button type="button" class="btn btn-success btn-lg" id="coin-modal-done-btn">Done</button>
    </div>
</div>

<div id="toast-container"></div>

<input type="hidden" id="remaining-seconds" value="{{.Session.RemainingSecs}}">
<input type="hidden" id="session-paused" value="{{.Session.IsPaused}}">
{{if .RedirectURL}}<input type="hidden" id="redirect-url" value="{{.RedirectURL}}">{{end}}
{{end}}

{{define "scripts"}}
<script src="/static/js/portal.js?v=1.3.0"></script>
<script>
(function() {
    var remaining = parseInt(document.getElementById('remaining-seconds').value, 10) || 0;
    var paused = document.getElementById('session-paused').value === 'true';
    SymfloFi.initStatus(remaining, paused);
})();
</script>
{{end}}