{# SPDX-License-Identifier: MIT -#}
        <div class="loading" id="vpn_progress_overlay">
          <div id="vpn_progress" class="async_output">
            <h3 id="vpn_progress_title">接続中...</h3>
            <div id="vpn_progress_text"><p></p></div>
            <button id="vpn_progress_close" style="transition: 0s">閉じる</button>
          </div>
        </div>
        <div class="contents">
        <div>
          <noscript><div style="position: fixed; top: 0px; left: 0px; z-index: 30000000;
                                height: 100%; width: 100%; background-color: #FFFFFF">
            <h2>JavaScript を有効にしてご利用下さい。</h2>
          </div></noscript>
          <h2>現在のVPN接続情報</h2>
          <form method="post" onsubmit="return onsubmitHandler()">
            <p>接続方式：
            {%- match connection_type -%}
            {%- when VpnType::None -%}
              未接続
            {%- when VpnType::Openvpn -%}
              openvpn
            {%- when VpnType::Wireguard -%}
              wireguard
            {%- endmatch -%}
            </p>
            <p>設定名：{%- if !setting_name.is_empty() %} {{ setting_name }} {%- else %} 未設定 {%- endif %}</p>
            <p>接続状態：{%- if vpn_addr["current_ip_addr"] == "--" %} 未接続  {%- else %} 接続中 {%- endif %}</p>
            {%- if connection_type == VpnType::Wireguard %}
            <p>自分の公開鍵：{{ wg_publickey }}</p>
            {%- endif %}
            <table>
              <tr>
                <th>IPアドレス</th>
                <th>サブネットマスク</th>
                <th>ゲートウェイ</th>
              </tr>
              <tr>
                <td>{{ vpn_addr["current_ip_addr"] }}</td>
                <td>{{ vpn_addr["current_netmask"] }}</td>
                <td>{{ vpn_addr["current_gw_addr"] }}</td>
              </tr>
            </table>
            <div class="button">
              <button type="submit" formaction="./vpn_connect"
                {%- if vpn_addr["current_ip_addr"] != "--" || setting_name.is_empty() %} class="disabled" disabled{%- endif %}>接続</button>
              <button type="submit" formaction="./vpn_disconnect"
                {%- if vpn_addr["current_ip_addr"] == "--" %} class="disabled" disabled{%- else %}class="delete"{%- endif %}>切断</button>
              <button type="submit" formaction="./vpn_delete" onclick="deleteHandler()"
                {%- if setting_name.is_empty() %} class="disabled" disabled{%- else %}class="delete"{%- endif %}>設定を削除</button>
            </div>
          </form>
          <hr/>
          <h2>VPN接続情報入力</h2>
          <h3>VPN接続に必要な情報を入力してください</h3>
          {%- if setting_name.is_empty() %}
          <form>
          <label>接続方式</label>
            <select id="connection_type" name="connection_type"  onchange="connectionTypeSelect()">
              <option value="openvpn">OpenVPN</option>
              {%- if is_wg_installed %}<option value="wireguard">WireGuard</option>{%- endif %}
            </select>
          </form>
          {%- endif %}
          {%- if setting_name.is_empty() || connection_type == VpnType::Openvpn %}
          <div id="openvpn">
            <form action="./vpn_setup" method="post"
              {%- if is_ovpn_installed %}
              onsubmit="return onsubmitHandler()"
              {%- else %}
              class="vpn_post"
              {%- endif %} enctype="multipart/form-data">
              <label for="setting_name">設定名</label>
              <input type="text" id="setting_name" name="setting_name" maxlength="128" required>
              <label for="auth_type">認証方式</label>
              <select id="auth_type" name="auth_type" onchange="authTypeSelect()">
                <option value="userpass">ユーザ名とパスワード</option>
                <option value="cert">証明書</option>
              </select>
              <label for="conf">設定ファイル(.ovpnファイル)</label>
              <input type="file" id="conf" name="conf" required>
              <div id="userpass">
                <label for="username">ユーザー名</label>
                <input type="text" id="username" name="username" maxlength="128">
                <label for="password">パスワード</label>
                <input type="text" id="password" name="password" maxlength="128" autocorrect="off" autocapitalize="none" autocomplete="off">
              </div>
              <div id="certkey">
                <label for="cert">証明書ファイル</label>
                <input type="file" id="cert" name="cert">
                <label for="key">鍵ファイル</label>
                <input type="file" id="key" name="key">
                <label for="key_pass">鍵ファイルのパスワード</label>
                <input type="text" id="key_pass" name="key_pass" maxlength="128" autocorrect="off" autocapitalize="none" autocomplete="off">
                <p>鍵にパスワードを設定している場合は入力してください</p>
              </div>
              <button type="submit">設定</button>
            </form>
          </div>
          {%- endif %}
          {%- if (setting_name.is_empty() && is_wg_installed) || connection_type == VpnType::Wireguard %}
          <div id="wireguard">
            <form action="./vpn_wg_setup" method="post" onsubmit="return onsubmitHandler()">
              <label for="wg_setting_name">設定名</label>
              <input type="text" id="wg_setting_name" name="setting_name" maxlength="128" required>
              <label for="endpoint">サーバーアドレス:ポート番号</label>
              <input type="text" id="endpoint" name="endpoint" maxlength="32" required>
              <label for="publickey">サーバーの公開鍵</label>
              <input type="text" id="publickey" name="publickey" maxlength="128" required>
              <label for="self_address">自分の IP アドレス</label>
              <input type="text" id="self_address" name="self_address" maxlength="32" required>
              <label for="dns_address">DNS アドレス</label>
              <input type="text" id="dns_address" name="dns_address" maxlength="32" required>
              <label for="keepalive">KeepAlive 間隔(秒)</label>
              <input type="text" id="keepalive" name="keepalive" value="25" maxlength="32" pattern="^[0-9]+$" required>
              <span>自分の公開鍵</span>
              <pre id="self_publickey">{{ wg_publickey }}</pre>
              <button type="button" onclick="wg_gen_key();">新しく鍵ペアを生成する</button>
              <p>自分の公開鍵をサーバーへ登録してから設定を行ってください</p>
              <button type="submit">設定</button>
            </form>
          </div>
          {%- endif %}
        </div>
      </div>
      <script type="text/javascript" src="../static/vpn/js/vpn.js"></script>