{{template "base" .}}

{{define "content"}}
{{if .Announcement}}<div class="announcement">{{.Announcement}}</div>{{end}}
{{if .MACMissing}}
<section class="action-section">
    <div style="background:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.2);border-radius:12px;padding:20px;text-align:center;margin-bottom:16px;">
        <p style="font-weight:600;color:#fbbf24;margin:0 0 4px;font-size:1.1rem;">Connecting...</p>
        <p style="color:#d4d4d8;font-size:0.9rem;margin:0;">Please wait a moment while we detect your device, then refresh this page.</p>
    </div>
    <button type="button" class="btn btn-primary btn-lg" onclick="window.location.reload()">Refresh</button>
</section>
{{else if .AtCapacity}}
<section class="action-section">
    <div style="background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);border-radius:12px;padding:20px;text-align:center;margin-bottom:16px;">
        <p style="font-weight:600;color:#f87171;margin:0 0 4px;font-size:1.1rem;">No Slots Available</p>
        <p style="color:#fca5a5;font-size:0.9rem;margin:0;">All {{.MaxUsers}} sessions are currently in use. Please wait for a slot to open.</p>
    </div>
</section>
{{else}}
<input type="hidden" id="slot-number" value="{{.Slot}}">
<section class="action-section">
    <button type="button" class="btn btn-success btn-lg" id="insert-coin-btn">
        <span style="font-size:1.2em;">&#8369;</span> Insert Coin
    </button>

    <div id="coin-ready-msg" class="coin-ready hidden">
        <span class="coin-ready-dot"></span>
        Ready — insert coin now
    </div>

    {{if .FreeTimeAvailable}}
    <div class="free-time-section">
        <button type="button" class="btn btn-success btn-block" id="free-time-btn">
            Claim {{.FreeTimeMinutes}} Min Free WiFi
        </button>
    </div>
    {{end}}

    <div class="voucher-inline" id="voucher-section">
        <form id="voucher-form" action="/api/portal/voucher" method="POST" 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-primary btn-voucher">Redeem</button>
        </form>
        <div id="voucher-message" class="message hidden"></div>
    </div>
</section>

{{if .TimeRates}}
<section class="rates-compact">
    <p class="rates-label">{{if .DataRates}}Time Rates{{else}}Rates{{end}}</p>
    <div class="rates-list">
        {{range .TimeRates}}
        <span class="rate-pill{{if .IsPromo}} rate-pill--promo{{end}}">
            &#8369;{{.AmountPesos}} = {{.DurationMins}}min{{if .IsPromo}} <small>{{if .PromoLabel}}{{.PromoLabel}}{{else}}PROMO{{end}}</small>{{end}}
        </span>
        {{end}}
    </div>
</section>
{{end}}

{{if .DataRates}}
<section class="rates-compact">
    <p class="rates-label">{{if .TimeRates}}Data Rates{{else}}Rates{{end}}</p>
    <div class="rates-list">
        {{range .DataRates}}
        <span class="rate-pill rate-pill--data{{if .IsPromo}} rate-pill--promo{{end}}">
            &#8369;{{.AmountPesos}} = {{.DataLimitMB}}MB{{if .IsPromo}} <small>{{if .PromoLabel}}{{.PromoLabel}}{{else}}PROMO{{end}}</small>{{end}}
        </span>
        {{end}}
    </div>
</section>
{{end}}

<!-- Coin Insert Modal -->
<div class="coin-modal" id="coin-modal">
    <div class="coin-modal-content" style="position:relative;">
        <button type="button" class="coin-modal-close" id="coin-modal-close-btn" title="Cancel">&times;</button>
        <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>
{{end}}{{/* end if .AtCapacity else */}}
{{end}}{{/* end define content */}}

{{define "scripts"}}
<noscript>
<style>.action-section .btn-success:not([type="submit"]), .coin-modal, #free-time-btn { display:none !important; }</style>
<div style="background:rgba(234,179,8,0.15);border:1px solid rgba(234,179,8,0.3);border-radius:12px;padding:16px;text-align:center;margin:16px;">
    <p style="color:#fbbf24;font-weight:600;margin:0 0 4px;">JavaScript Required for Coin Insert</p>
    <p style="color:#d4d4d8;font-size:0.9rem;margin:0;">You can still use voucher codes below. For coin insert, please open this page in your phone's browser.</p>
</div>
</noscript>
<script src="/static/js/portal.js?v=1.3.0"></script>
{{end}}