{# SPDX-License-Identifier: MIT -#}
      <div class="contents">
        <div>
        {%- if wlan_client %}
          <h2>動作モード選択</h2>
          {%- if info.hostapd.interface.is_some() %}
          <h3>現在アクセスポイントモードで使用中です</h3>
          {%- endif %}
          {%- if info.sta.ssid.is_some() %}
          <h3>現在クライアントモードで使用中です</h3>
          {%- endif %}
          <form name="mode_form">
            <label for="sta-0">
              <input type="radio" id="sta-0" name="mode" value="sta" onchange="modeSelect()"
              {%- if info.hostapd.interface.is_none() %} checked {%- endif %}>クライアントとして使用する
            </label>
            <label for="ap-0">
              <input type="radio" id="ap-0" name="mode" value="ap" onchange="modeSelect()"
              {%- if info.hostapd.interface.is_some() %} checked {%- endif %}>アクセスポイントとして使用する
            </label>
          </form>
        </div>
        {%- endif %}
        {%- if wlan_client %}
        <div id="sta_setting">
          {%- if info.hostapd.interface.is_some() %}
          <h3>アクセスポイントモードで使用中のためクライアントの設定はできません</h3>
          <div class="status">
            <p>クライアントモードを使用するにはアクセスポイントの設定を削除する必要があります</p>
          </div>
          {%- else %}
          <h2>現在のWLAN接続情報</h2>
          <form method="post" onsubmit="return onsubmitHandler()">
            <p>接続状態：{%- if info.sta.ip_addr.is_none() %} 未接続  {%- else %} 接続中 {%- endif %}</p>
            <table>
              <tr>
                <th>ネットワーク名(SSID)</th>
                <th>セキュリティ方式</th>
              </tr>
              <tr>
                <td id="wlan_con_ssid">{{ info.sta.ssid|or_dash }}</td>
                <td>{{ info.sta.security|or_dash }}</td>
              </tr>
            </table>
            <table>
              <tr>
                <th>IPアドレス</th>
                <th>ゲートウェイ</th>
                <th>インターフェース</th>
              </tr>
              <tr>
                <td>{{ info.sta.ip_addr|or_dash }}</td>
                <td>{{ info.sta.gw_addr|or_dash }}</td>
                <td>{{ info.sta.interface.as_deref().or(Some(interface)).unwrap_or("--") }}</td>
              </tr>
            </table>
            <input type="hidden" name="con_uuid" value="{{ info.sta.uuid|or_dash }}"/>
            <button type="submit" formaction="./wlan_disconnect"
              {%- if info.sta.ip_addr.is_none() %} class="disabled" disabled{%- else %}class="delete"{%- endif %}>切断</button>
          </form>
          <hr/>
          <form method="post" onsubmit="return onsubmitHandler()">
            <table>
              <tr>
                <th></th>
                <th>ネットワーク名(SSID)</th>
                <th>自動コネクト</th>
              </tr>
            {%- for savedid in info.wlan_saved %}
              <tr>
                <td><input id="{{ savedid.uuid }}" type="radio" name="con_uuid" value="{{ savedid.uuid }}" {%- if loop.first %}checked{%- endif %}></td>
                <td><label name="saved_ssid" for="{{ savedid.uuid }}">{{ savedid.ssid }}</label></td>
                <td><label for ="{{ savedid.uuid }}">{{ savedid.autoconnect }}</label></td>
              </tr>
            {%- endfor %}
            </table>
            <input type="hidden" name="return_url" value="/wlan"/>
            <div class="button">
              <button type="submit" formaction="./wlan_connect"
              {%- if info.wlan_saved.is_empty() %} class="disabled" disabled{%- endif %}>接続</button>
              <button type="submit" formaction="./connection_setup" formmethod="get"
              {%- if info.wlan_saved.is_empty() %} class="disabled" disabled{%- endif %}>設定を編集</button>
              <button type="submit" formaction="./wlan_delete" onclick="deleteHandler()"
              {%- if info.wlan_saved.is_empty() %} class="disabled" disabled{%- else %}class="delete"{%- endif %}>設定を削除</button>
            </div>
          </form>
          <hr/>
          <h2>WLAN接続情報入力</h2>
          <h3>接続したいネットワーク名(SSID)を選択してください</h3>
          <form name="wlan_form" method="post" onsubmit="onsubmitHandler()">
            <label for="essid">ネットワーク名(SSID)  <div class="loader wlan" id="wlan_load"></div></label>
            <div class="dropdown_wrapper">
              <input type="text" id="essid" name="essid" placeholder="SSID" required>
              <div class="dropdown" id="essid_dropdown" tabindex="0">
                {%- for ssid in ssid_list %}
                <div class="item">
                  <input type="radio" name="essid_list" value="{{ ssid.id }}" id="essid-{{ ssid.id }}" onclick="change_essid()"/>
                  <label for="essid-{{ ssid.id }}">
                    <img src="static/wlan/images/wlan_signal-{{ssid.strength}}.png"/>{{ ssid.id }}
                  </label>
                </div>
                {%- endfor %}
              </div>
            </div>
            <p id="overwrite_message" class="alert_message">* 保存済みのSSIDです。新しい設定を保存すると、前の設定は上書きされます。</p>
            <label for="security">セキュリティ方式</label>
            <select id="security" name="security">
              <option value="wpa-psk">WPA2</option>
              <option value="sae">WPA3</option>
            </select>
            <label for="password">パスワード</label>
            <input type="text" id="password" name="password" maxlength="128" autocorrect="off" autocapitalize="none" autocomplete="off" required>
            <label for="auto-0">
              <input type="radio" id="auto-0" name="method" value="auto" onchange="methodSelect()" checked="">DHCP
            </label>
            <label for="manual-0">
              <input type="radio" id="manual-0" name="method" value="manual" onchange="methodSelect()">固定
            </label>
            <div id="manual_setting">
              <label for="ip_addr">IPアドレス</label>
              <input type="text" id="ip_addr" name="ip_addr" value="192.168.1.1" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}">
              <label for="netmask">サブネットマスク</label>
              <input type="text" id="netmask" name="netmask" value="255.255.255.0" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}">
              <label for="gateway_addr">ゲートウェイアドレス</label>
              <input type="text" id="gateway_addr" name="gateway_addr" value="192.168.1.254" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}">
              <label for="p_dns_addr">プライマリDNSアドレス</label>
              <input type="text" id="p_dns_addr" name="p_dns_addr" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}">
              <label for="s_dns_addr">セカンダリDNSアドレス</label>
              <input type="text" id="s_dns_addr" name="s_dns_addr" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}">
            </div>
            <div class="button">
              <button type="submit" formaction="./wlan_setup">接続して保存</button>
              <button type="submit" formaction="./wlan_save">保存</button>
            </div>
          </form>
          {%- endif %}
        </div>
        {%- endif %}
        <div id="ap_setting">
          <h2>現在のアクセスポイント情報</h2>
          <form action="./ap_delete" method="post" onsubmit="return onsubmitHandler()">
            <table>
              <tr>
                <th>SSID</th>
                <th>使用周波数</th>
                <th>チャンネル</th>
              </tr>
              <tr>
                <td>{{ info.hostapd.ssid|or_dash }}</td>
                <td>{{ info.hostapd.hw_mode|or_dash }}</td>
                <td>{{ info.hostapd.channel|or_dash }}</td>
              </tr>
            </table>
            <table>
              <tr>
                <th>ブリッジアドレス</th>
                <th>インターフェース</th>
              </tr>
              <tr>
                <td>{{ info.bridge_addr|or_dash }}</td>
                <td>{{ info.hostapd.bridge|or_dash }}</td>
              </tr>
            </table>
            <button type="submit" onclick="deleteHandler()"
              {%- if info.hostapd.interface.is_none() %} class="disabled" disabled{%- else %}class="delete"{%- endif %}>設定を削除</button>
          </form>
          <hr/>
          <h2>アクセスポイント設定入力</h2>
          <h3>アクセスポイントとして使用するために必要な設定を入力してください</h3>
          <form action="./ap_setup" method="post" onsubmit="return onsubmitAPHandler()">
              <label for="bridge_addr">ブリッジアドレス</label>
              <input type="text" id="bridge_addr" name="bridge_addr" value="192.168.1.1" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" required>
              <label for="netmask_ap">サブネットマスク</label>
              <input type="text" id="netmask_ap" name="netmask" value="255.255.255.0" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" required>
              <label for="hw_mode">使用周波数</label>
              <select id="hw_mode" name="hw_mode" onchange="hwmodeSelect()">
                <option value="a">5GHz</option>
                <option value="g">2.4GHz</option>
              </select>
              <label for="channel">使用チャンネル</label>
              <select id="channel" name="channel">
                <option value="36">36</option>
                <option value="40">40</option>
                <option value="44">44</option>
                <option value="48">48</option>
              </select>
              <label for="ssid">SSID</label>
              <input type="text" id="ssid" name="ssid" maxlength="32" required>
              <p id="input_alert_ssid" class="alert_message">* SSID名は 1 ～ 32 バイトの範囲で設定してください。 </p>
              <label for="wpa_passphrase">パスワード</label>
              <input type="text" id="wpa_passphrase" name="wpa_passphrase" maxlength="63" autocorrect="off" autocapitalize="none" autocomplete="off" required>
              <p id="input_alert_passphrase" class="alert_message">* パスワードは半角英数字記号を 8 ～ 63 文字の範囲で設定してください。</p>
              <button type="submit">設定</button>
          </form>
        </div>
      </div>
    <script type="text/javascript" src="../static/wlan/js/wlan.js"></script>