  <div class="ui fixed menu">
    <div class="ui container">
      <a href="http://127.0.0.1:5000" class="header item">
        TRPGa Rank
      </a>
      <a id="search" class="item">アイテムを検索する</a>
      <a href="/about" class="item" target="_blank" rel="noopener noreferrer">サイトについて</a>
      <a href="/contact" class="item" target="_blank" rel="noopener noreferrer">お問い合わせ</a>
    </div>
  </div>
  <div class="ui grid container">
    <div class="ui very relaxed items">
      {% if target_data %}
      <div class="item">
        <div class="image">
          <img src={{target_data[0][3]}}>
        </div>
        <div class="content">
          <a class="ui header" id="id02">
            <font style="vertical-align: inherit;">{{target_data[0][1]}}</font>
            </font>
          </a>
          <div class="description">
            <p>
              <font style="vertical-align: inherit;">{{target_data[0][5]}}</font>
            </p>
          </div>
          <div class="ui buttons" style="white-space: nowrap; font-size: calc(1vw + 10px); margin-top: 15px;">
{#             <button class="amazon-button" onclick="window.location.href='https://www.amazon.co.jp/'">
              Amazon
            </button>
            <button class="rakuten-button" onclick="window.location.href='https://www.rakuten.co.jp/'">
              Rakuten
            </button>
            <button class="yahoo-button" onclick="window.location.href='https://shopping.yahoo.co.jp/'">
              Yahoo!ショッピング
            </button> #}
            <button id="{{target_data[0][0]}}" class="likeButton" value="{{target_data[0][1]}}"
              onclick="runScript(this)">
              <i class="fas fa-heart heart-icon"></i><span id="{{target_data[0][1]}}"
                style="margin-left: 5px;">{{target_data[0][4]}}</span>
            </button>
          </div>
        </div>
      </div>
      {% else %}
      {% set items_to_show = 10 %}
      {% for item in data[:items_to_show] %}
      {% if loop.index == 1 %}
      <div class="item">
        <div class="image">
          <img src={{item[3]}}>
        </div>
        <div class="content">
          <p class="ui header" id="id02">
            <font style="vertical-align: inherit;"><i class="fas fa-crown crown-icon1"></i>{{loop.index}}位　{{item[1]}}
            </font>
          </p>
          <div class="description">
            <p>
              <font style="vertical-align: inherit;">{{item[5]}}</font>
            </p>
          </div>
          <div class="ui buttons" style="white-space: nowrap; font-size: calc(1vw + 10px); margin-top: 15px;">
{#             <button class="amazon-button" onclick="window.location.href='https://www.amazon.co.jp/'">
              Amazon
            </button>
            <button class="rakuten-button" onclick="window.location.href='https://www.rakuten.co.jp/'">
              Rakuten
            </button>
            <button class="yahoo-button" onclick="window.location.href='https://shopping.yahoo.co.jp/'">
              Yahoo!ショッピング
            </button> #}
            <button id="{{item[0]}}" class="likeButton" value="{{item[1]}}" onclick="runScript(this)">
              <i class="fas fa-heart heart-icon"></i><span id="{{item[1]}}" style="margin-left: 5px;">{{item[4]}}</span>
            </button>
          </div>
        </div>
      </div>
      {% elif loop.index == 2 %}
      <div class="item">
        <div class="image">
          <img src={{item[3]}}>
        </div>
        <div class="content">
          <p  class="ui header" id="id02">
            <font style="vertical-align: inherit;"><i class="fas fa-crown crown-icon2"></i>{{loop.index}}位　{{item[1]}}
            </font>
          </p>
          <div class="description">
            <p>
              <font style="vertical-align: inherit;">{{item[5]}}</font>
            </p>
          </div>
          <div class="ui buttons" style="white-space: nowrap; font-size: calc(1vw + 10px); margin-top: 15px;">
{#             <button class="amazon-button" onclick="window.location.href='https://www.amazon.co.jp/'">
              Amazon
            </button>
            <button class="rakuten-button" onclick="window.location.href='https://www.rakuten.co.jp/'">
              Rakuten
            </button>
            <button class="yahoo-button" onclick="window.location.href='https://shopping.yahoo.co.jp/'">
              Yahoo!ショッピング
            </button> #}
            <button id="{{item[0]}}" class="likeButton" value="{{item[1]}}" onclick="runScript(this)">
              <i class="fas fa-heart heart-icon"></i><span id="{{item[1]}}" style="margin-left: 5px;">{{item[4]}}</span>
            </button>
          </div>
        </div>
      </div>
      {% elif loop.index == 3 %}
      <div class="item">
        <div class="image">
          <img src={{item[3]}}>
        </div>
        <div class="content">
          <p  class="ui header" id="id02">
            <font style="vertical-align: inherit;"><i class="fas fa-crown crown-icon3"></i>{{loop.index}}位　{{item[1]}}
            </font>
          </p>
          <div class="description">
            <p>
              <font style="vertical-align: inherit;">{{item[5]}}</font>
            </p>
          </div>
          <div class="ui buttons" style="white-space: nowrap; font-size: calc(1vw + 10px); margin-top: 15px;">
{#             <button class="amazon-button" onclick="window.location.href='https://www.amazon.co.jp/'">
              Amazon
            </button>
            <button class="rakuten-button" onclick="window.location.href='https://www.rakuten.co.jp/'">
              Rakuten
            </button>
            <button class="yahoo-button" onclick="window.location.href='https://shopping.yahoo.co.jp/'">
              Yahoo!ショッピング
            </button> #}
            <button id="{{item[0]}}" class="likeButton" value="{{item[1]}}" onclick="runScript(this)">
              <i class="fas fa-heart heart-icon"></i><span id="{{item[1]}}" style="margin-left: 5px;">{{item[4]}}</span>
            </button>
          </div>
        </div>
      </div>
      {% else %}
      <div class="item">
        <div class="image">
          <img src={{item[3]}}>
        </div>
        <div class="content">
          <p class="ui header" id="id02">
            <font style="vertical-align: inherit;">{{loop.index}}位　{{item[1]}}</font>
          </p>
          <div class="description">
            <p>
              <font style="vertical-align: inherit;">{{item[5]}}</font>
            </p>
          </div>
          <div class="ui buttons" style="white-space: nowrap; font-size: calc(1vw + 10px); margin-top: 15px;">
{#             <button class="amazon-button" onclick="window.location.href='https://www.amazon.co.jp/'">
              Amazon
            </button>
            <button class="rakuten-button" onclick="window.location.href='https://www.rakuten.co.jp/'">
              Rakuten
            </button>
            <button class="yahoo-button" onclick="window.location.href='https://shopping.yahoo.co.jp/'">
              Yahoo!ショッピング
            </button> #}
            <button id="{{item[0]}}" class="likeButton" value="{{item[1]}}" onclick="runScript(this)">
              <i class="fas fa-heart heart-icon"></i><span id="{{item[1]}}" style="margin-left: 5px;">{{item[4]}}</span>
            </button>
          </div>
        </div>
      </div>
      {% endif %}
      {% if loop.index >= 10 %}
        <button id="more-btn" class="btn_more">さらに表示</button>
      {% endif %}
      {% endfor %}
      {% endif %}
              </div>
            </div>
          </div>
        </div>
    </form>
  </div>
<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>
