{% extends 'base.html' %}
{% block title %}Radio Console{% endblock %}
{% block content %}
<section class="radio-console-page" data-radio-console>
  <header class="board-head radio-console-head">
    <div><p class="eyebrow">STATION SERVICE // SHARED RECEIVER</p><h1>Radio Console</h1><p>Advanced radio controls. Audio continues while you use other station services.</p></div>
    <div class="radio-console-actions">{% if can_manage_broadcasts %}<a class="button secondary" href="{{ url_for('broadcast.manage') }}">MANAGE BROADCASTS</a>{% endif %}<div class="radio-console-power"><span class="radio-console-access" data-radio-access>RADIO OFF</span><button type="button" class="secondary" data-radio-power aria-pressed="false">POWER: OFF</button></div></div>
  </header>
  <div class="radio-receiver">
    <div class="radio-display"><span>RX / TX MHz</span><output data-radio-display>---.--</output><strong class="radio-marquee" data-radio-receiver-name hidden><span></span></strong><small class="radio-marquee" data-radio-receiver-message hidden><span></span></small><div class="radio-now-playing-block" data-radio-now-playing-block hidden><span data-radio-broadcast-status></span><b class="radio-marquee" data-radio-now-playing hidden><span></span></b><small class="radio-marquee" data-radio-now-playing-artist hidden><span></span></small></div><small data-radio-band>RADIO POWER OFF</small></div>
    <div class="radio-controls">
      <button type="button" class="secondary" data-radio-step="-500">TUNE − 0.50</button>
      <label>Frequency MHz<input data-radio-input type="text" inputmode="decimal" enterkeyhint="go" autocomplete="off" pattern="[0-9]{1,3}(\.[0-9]{1,2})?" maxlength="6" placeholder="145.00"></label>
      <button type="button" class="secondary" data-radio-tune>TUNE</button>
      <button type="button" class="secondary" data-radio-step="500">TUNE + 0.50</button>
      <label>Band <select data-radio-band-select><option>LOADING...</option></select></label>
      <button type="button" data-radio-scan="down">&lt; SCAN</button><button type="button" data-radio-scan="up">SCAN &gt;</button>
    </div>
  </div>
  <div class="radio-monitor" aria-label="Live audio signal monitor">
    <canvas data-radio-scope width="900" height="150"></canvas><span class="radio-monitor-label">LIVE SIGNAL</span><strong data-radio-monitor-status>OFF</strong>
  </div>
  <div class="radio-operation">
    <label>Volume <input data-radio-volume type="range" min="0" max="100" value="55"></label>
    <button type="button" class="secondary" data-radio-mute aria-pressed="false">MUTE: OFF</button>
    <span class="radio-occupancy" data-radio-occupancy>RECEIVER OFF</span>
  </div>
  <aside class="radio-broadcast-directory" aria-labelledby="broadcast-directory-title">
    <div><p class="eyebrow">AVAILABLE PROGRAMMING</p><h2 id="broadcast-directory-title">Station broadcast directory</h2></div>
    <ul data-radio-broadcast-directory><li class="muted">LOADING DIRECTORY...</li></ul>
  </aside>
  <div class="radio-mode-selector" data-radio-mode-chooser hidden>
    <label>Active mode
      <select data-radio-mode-select aria-controls="radio-mode-cw radio-mode-sstv radio-mode-voice"></select>
    </label>
    <small>Select the controls you want to operate on this band.</small>
  </div>
  <section class="radio-mode-panel" id="radio-mode-cw" data-radio-cw hidden>
    <div class="radio-cw-controls">
      <button type="button" data-radio-cw-tx data-radio-cw-transmit disabled>BEGIN CW TRANSMISSION</button>
      <button type="button" class="secondary radio-key" data-radio-key data-radio-cw-transmit disabled>HOLD KEY [SPACE]</button>
      <label data-radio-cw-transmit>Tone Hz <input data-radio-tone type="number" min="400" max="1000" step="10" value="650"></label>
      <label>Speed WPM <input data-radio-wpm type="number" min="5" max="40" step="1" value="18"></label>
      <label class="switch"><input data-radio-decoder type="checkbox"> CW decoder</label>
    </div>
    <output class="radio-decoder" data-radio-decoder-output>DECODER OFF</output>
    <details class="morse-reference"><summary>MORSE REFERENCE</summary><p>A .- &nbsp; B -... &nbsp; C -.-. &nbsp; D -.. &nbsp; E . &nbsp; F ..-. &nbsp; G --. &nbsp; H .... &nbsp; I .. &nbsp; J .--- &nbsp; K -.- &nbsp; L .-.. &nbsp; M -- &nbsp; N -. &nbsp; O --- &nbsp; P .--. &nbsp; Q --.- &nbsp; R .-. &nbsp; S ... &nbsp; T - &nbsp; U ..- &nbsp; V ...- &nbsp; W .-- &nbsp; X -..- &nbsp; Y -.-- &nbsp; Z --.. &nbsp; 0 ----- &nbsp; 1 .---- &nbsp; 2 ..--- &nbsp; 3 ...-- &nbsp; 4 ....- &nbsp; 5 ..... &nbsp; 6 -.... &nbsp; 7 --... &nbsp; 8 ---.. &nbsp; 9 ----.</p></details>
  </section>
  <section class="radio-mode-panel" id="radio-mode-sstv" data-radio-sstv hidden>
    <div class="radio-sstv-controls">
      <label data-radio-sstv-transmit>Local image <input data-radio-image type="file" accept="image/png,image/jpeg,image/webp,image/gif"></label>
      <button type="button" data-radio-sstv-tx data-radio-sstv-transmit disabled>TRANSMIT PICTURE</button>
      <button type="button" class="secondary" data-radio-sstv-save disabled>SAVE RECEIVED</button>
    </div>
    <div class="radio-pictures">
      <figure data-radio-sstv-transmit><figcaption>TX PREVIEW / 80 x 60 MAX</figcaption><canvas data-radio-tx-picture width="80" height="60"></canvas></figure>
      <figure><figcaption data-radio-rx-caption>RX PICTURE / NO SIGNAL</figcaption><canvas data-radio-rx-picture width="80" height="60"></canvas></figure>
    </div>
  </section>
  <section class="radio-mode-panel" id="radio-mode-voice" data-radio-voice hidden>
    <div class="radio-voice-controls">
      <button type="button" class="radio-ptt" data-radio-ptt disabled>HOLD TO TALK [V]</button>
      <div><strong data-radio-voice-status>VOICE STANDBY</strong><small>Hold the button or V while this page is not accepting text input. Release to clear the frequency.</small></div>
    </div>
    <p class="muted" data-radio-voice-help>Microphone access requires HTTPS when connecting from another computer. Localhost may use HTTP.</p>
  </section>
  <p class="chat-error radio-error" data-radio-error aria-live="polite"></p>
  {% if can_manage_broadcasts %}
  <section class="terminal-card broadcast-section collapsible-panel" data-radio-broadcast-panel data-collapsible-panel data-panel-key="radio-broadcast-management">
    <button type="button" class="collapsible-panel-toggle" data-panel-toggle aria-expanded="true" aria-controls="broadcast-management-content">
      <span class="collapsible-panel-heading"><span class="eyebrow">HOSTED AUDIO / UNIFIED PROGRAMS / LIVE DJ</span><span class="collapsible-panel-title" role="heading" aria-level="2">Broadcast console</span></span>
      <span class="collapsible-panel-chevron" aria-hidden="true"></span>
    </button>
    <div id="broadcast-management-content" data-panel-content>
    <p>Assigned frequency: <strong data-radio-broadcast-frequency>NONE</strong></p>
    <div class="form-grid">
      <label>Simple playlist <select data-radio-broadcast-playlist><option value="">NO PLAYLISTS</option></select></label>
      <label>Or unified program <select data-radio-broadcast-program><option value="">NO PROGRAM</option></select></label>
      <p>Current track: <strong data-radio-broadcast-track>OFF AIR</strong></p>
      <p>Status: <strong data-radio-broadcast-state>STOPPED</strong></p>
      <p>Remaining session time: <strong data-radio-broadcast-remaining>--:--</strong></p>
      <div class="button-row"><button type="button" data-radio-broadcast-start>START BROADCAST</button><button type="button" class="danger" data-radio-broadcast-stop disabled>STOP</button></div>
      <div class="dj-console" data-radio-dj-console>
        <p><strong data-radio-dj-indicator>DJ CONTROL AVAILABLE</strong></p>
        <div class="button-row"><button type="button" class="secondary" data-radio-dj-take>TAKE CONTROL</button><button type="button" class="secondary" data-radio-dj-pause disabled>PAUSE</button><button type="button" class="secondary" data-radio-dj-skip disabled>SKIP</button><button type="button" class="radio-ptt" data-radio-dj-ptt disabled>HOLD TO TALK</button></div>
        <div class="inline-form"><label>Instant content<select data-radio-dj-trigger-select disabled><option value="">NO PREPARED CONTENT</option></select></label><button type="button" class="secondary" data-radio-dj-trigger disabled>PLAY NOW</button></div>
        <label>Music ducking <input type="range" min="0" max="100" value="35" data-radio-dj-duck disabled><small>Music level while the microphone is open.</small></label>
        <label>Microphone level <input type="range" min="0" max="150" value="100" data-radio-dj-mic-level disabled></label>
      </div>
      <small data-radio-broadcast-help>An assigned frequency is required unless the tuned band allows open broadcasts.</small>
    </div>
    </div>
  </section>
  {% endif %}
</section>
{% endblock %}