<footer id="footer">
    <div class="ui inverted vertical footer segment">
        <div class="ui container">
            <div class="ui stackable inverted divided equal height stackable grid">
                <div class="three wide column">
                    <h5 class="ui inverted header">運営情報</h5>
                    <div class="ui inverted link list">
                        <a href="/" class="item">ホーム</a>
                        <a href="https://treeees.com/" target="_blank" rel="noopener noreferrer" class="item">公式サイト</a>
                        <a href="https://twitter.com/N_treeees" target="_blank" rel="noopener noreferrer" class="item">X（旧Twitter）</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h5 class="ui inverted header">ご利用について</h5>
                    <div class="ui inverted link list">
                        <a href="/about" target="_blank" rel="noopener noreferrer" class="item">サイトについて</a>
                        <a href="/privacy" target="_blank" rel="noopener noreferrer" class="item">プライバシーポリシー</a>
                        <a href="/contact" class="item" target="_blank" rel="noopener noreferrer">お問い合わせ</a>
                    </div>
                </div>
                <div class="seven wide column">
{#                     <h5 class="ui inverted header">広告と情報</h5>
                    <p>本サイトアフィリエイト広告を利用しています。</p> #}
                </div>
            </div>
        </div>
    </div>
    <!-- Copyright section -->
    <div class="ui inverted vertical footer segment" style="background-color: #1b1c1d;text-align: center;font-weight: normal;font-family: 'Noto Sans JP', sans-serif;font-size: 10.5px;">
        <p>Copyright © ️2024 TRPGa Rank All rights reserved.</p>
    </div>
</footer>
  <div id="error-modal" class="ui basic modal">
    <div class="ui icon header">
      <i class="exclamation triangle icon"></i>
      <div style="margin-top: 28.5px;">
        <p>いいねがうまく発動しませんでした！</p>
      </div>
    </div>
    <div class="content">
      <!-- エラーメッセージがここに挿入される -->
    </div>
    <div class="actions" style="display: flex; justify-content: center;">
      <div class="ui red basic cancel inverted button">
        <i class="remove icon"></i>
        閉じる
      </div>
    </div>
  </div>
  <div class="ui search modal">
    <i class="close icon"></i>
    <div class="image content">
      <div class="description">
        <div class="ui center aligned header" style="display: flex; justify-content: center; align-items: center;">
          <p style="text-align: center; vertical-align: middle; width: 100%;">アイテムを検索する</p>
        </div>
        <form id='myForm' action="/submit" method="POST">
          <div class="ui fluid search selection dropdown">
            <input type="hidden" name="item">
            <i class="dropdown icon"></i>
            <div class="default text">検索する</div>
            <div class="menu">
              {% for item in data %}
              <div class="item" data-value="{{item[1]}}">{{item[1]}}</div>
              {% endfor %}
            </div>
          </div>
          <button class="fluid ui blue button" style="margin-top:20px">
            検索する
          </button>
        </form> <!-- この行でフォームを閉じています -->
      </div>
    </div>
  </div>