{@ include(common/header) @}
      <style>
        .tabs {
          border-radius: 2px;
          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .tab-nav {
          display: flex;
          border-bottom: 1px solid #ea79d8;
        }

        .tab-nav label {
          flex: 1;
          color: #ea79d8;
          padding: 16px 20px;
          text-align: center;
          cursor: pointer;
          background: #550f75;
          transition: all 0.3s;
          font-weight: 600;
        }

        .tab-nav label:hover {
          background: #8952a3;
        }

        .tab-input {
          display: none;
        }

        #tab1:checked ~ .tab-nav label[for="tab1"],
        #tab2:checked ~ .tab-nav label[for="tab2"],
        #tab3:checked ~ .tab-nav label[for="tab3"],
        #tab4:checked ~ .tab-nav label[for="tab4"] {
          background: #2c023f;
          border-bottom: 3px solid #ea79d8;
          color: #ea79d8;
        }

        .tab-content {
          display: none;
          min-height: 200px;
        }

        #tab1:checked ~ .tab-content[data-tab="1"],
        #tab2:checked ~ .tab-nav ~ .tab-content[data-tab="2"],
        #tab3:checked ~ .tab-nav ~ .tab-content[data-tab="3"],
        #tab4:checked ~ .tab-nav ~ .tab-content[data-tab="4"] {
          display: block;
        }
      </style>

      <a href="#" class="">DNSレコードの追加ボタン</a><br />
      <a href="#" class="">DNSゾーンの削除ボタン</a><br />
{@ if (isset($data['rec']['results']) || isset($data['zone'])) @}
      検索バー<br />
      <div class="tabs">
        <input type="radio" id="tab1" name="tabs" class="tab-input" checked />
        <input type="radio" id="tab2" name="tabs" class="tab-input" />
        <input type="radio" id="tab3" name="tabs" class="tab-input" />
        <input type="radio" id="tab4" name="tabs" class="tab-input" />

        <div class="tab-nav">
          <label for="tab1">レコード</label>
          <label for="tab2">詳細</label>
          <label for="tab3">DNSSEC鍵</label>
          <label for="tab4">履歴</label>
        </div>

        <div class="tab-content" data-tab="1">
          <h2>レコード</h2>
          <table>
            <thead>
              <tr>
                <th>名前</th>
                <th>種類</th>
                <th>内容</th>
                <th>プライオリティ</th>
                <th>TTL</th>
              </tr>
            </thead>
            <tbody>
{@ foreach ($data['rec']['results'] as $d) @}
              <tr>
                <td><a href="/openprovider/editdnszone/{{ $d['name'] }}">{{ $d['name'] }}</a></td>
                <td>{{ $d['type'] }}</td>
                <td>{{ substr($d['value'], 0, 40) }}</td>
                <td>{{ $d['prio'] ?? '' }}</td>
                <td>{{ $d['ttl'] }}</td>
              </tr>
{@ endforeach @}
            </tbody>
          </table>
        </div>

        <div class="tab-content" data-tab="2">
          <h2>詳細</h2>
          <table>
            <tbody>
              <tr>
                <td>ドメイン名</td>
                <td>{{ $data['zone']['name'] }}</td>
              </tr>
              <tr>
                <td>種類</td>
                <td>{{ $data['zone']['type'] }}</td>
              </tr>
              <tr>
                <td>DNSゾーンプロバイダー</td>
                <td>Openprovider</td>
              </tr>
              <tr>
                <td>追加日</td>
                <td>{{ $data['zone']['creation_date'] }}</td>
              </tr>
              <tr>
                <td>最終更新日</td>
                <td>{{ $data['zone']['modification_date'] }}</td>
              </tr>
              <tr>
                <td>レコード数</td>
                <td>{{ $data['rec']['total'] }}</td>
              </tr>
              <tr>
                <td>DNSSEC有効</td>
                <td></td>
              </tr>
              <tr>
                <td>SpamExperts</td>
                <td>{{ $data['zone']['is_spamexperts_enabled'] ? '有' : '無' }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="tab-content" data-tab="3">
          <h2>DNSSEC鍵</h2>
          <p>ささ</p>
        </div>

        <div class="tab-content" data-tab="4">
          <h2>履歴</h2>
          <p>ささ</p>
        </div>
      </div>
{@ else @}
      <p>何も見つけられませんでした。</p>
{@ endif @}
{@ include(common/footer) @}