{# SPDX-License-Identifier: MIT -#}
        <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>現在のDDNS設定情報</h2>
          <form method="post" onsubmit="return onsubmitHandler()">
            <table>
              <tr>
                <th>DDNSサービス</th>
                <th>ホスト名</th>
                <th>更新間隔</th>
              </tr>
              <tr>
                <td>{{ ddns_info.get("service1").unwrap_or(&"--") }}</td>
                <td>{{ ddns_info.get("hostname1").unwrap_or(&"--") }}</td>
                <td>{{ ddns_info.get("interval").unwrap_or(&"--") }}秒</td>
              </tr>
              {%- if let Some(svc2) = ddns_info.get("service2") %}
              <tr>
                <td>{{ svc2 }}</td>
                <td>{{ ddns_info.get("hostname2").unwrap_or(&"--") }}</td>
                <td>{{ ddns_info.get("interval").unwrap_or(&"--") }}秒</td>
              </tr>
              {%- endif %}
            </table>
            {%- if let Some(svc1) = ddns_info.get("service1") %}
            <p>※最新のDDNS状態については、システムログおよびDDNSサービスサイトをご確認ください。また、DNSの伝播には時間がかかる場合があります。</p>
            {%- endif %}
            <div class="button">
              <button type="submit" formaction="./ddns_delete" onclick="deleteHandler()"
                {%- if ddns_info.get("service1").is_none() %} class="disabled" disabled{%- else %}class="delete"{%- endif %}>設定を削除</button>
            </div>
          </form>
          <hr/>
          <h2>DDNS設定情報入力</h2>
          <h3>Dynamic DNS設定に必要な情報を入力してください</h3>
          <form method="post" class="ddns_post" enctype="multipart/form-data" action="./ddns_setup"  onsubmit="return onsubmitDDNSHandler()">
            <label for="ddns_service">DDNSサービス</label>
            <select id="ddns_service" name="ddns_service" onchange="serviceSelect()" required>
              <option value="">選択してください</option>
              <option value="no-ip">No-IP</option>
              <option value="dyndns">DynDNS</option>
              <option value="cloudflare">Cloudflare</option>
              <option value="duckdns">DuckDNS</option>
              <option value="file">設定ファイル指定</option>
            </select>

            <div id="normal_settings" style="display: block;">
              <label for="hostname">ホスト名</label>
              <input type="text" id="hostname" name="hostname" placeholder="example.ddns.net" maxlength="255">
              <p>更新対象のホスト名（FQDN）を入力してください</p>

              <div id="username_settings" style="display: block;">
                <label for="username">ユーザー名</label>
                <input type="text" id="username" name="username" maxlength="128">
              </div>

              <label for="password">パスワード/APIキー/トークン</label>
              <input type="text" id="password" name="password" maxlength="128" autocorrect="off" autocapitalize="none" autocomplete="off">
              <p>サービスによってはAPIキー/トークンを使用します</p>

              <div id="cloudflare_settings" style="display: none;">
                <label for="proxied">プロキシ</label>
                <select id="proxied" name="proxied">
                  <option value="false" selected>使用しない</option>
                  <option value="true">使用する</option>
                </select>
                <p>プロキシ使用を指定します</p>
              </div>

              <label for="interval">チェック間隔</label>
              <select id="interval" name="interval">
                <option value="60">1分</option>
                <option value="300">5分</option>
                <option value="600">10分</option>
                <option value="1800">30分</option>
                <option value="3600">1時間</option>
                <option value="21600">6時間</option>
              </select>
            </div>

            <div id="file_settings" style="display: none;">
              <label for="conf">設定ファイル(.confファイル)</label>
              <input type="file" id="conf" name="conf">
            </div>

            <button type="submit">設定</button>
          </form>
        </div>
      </div>
      <script type="text/javascript" src="../static/ddns/js/ddns.js"></script>