<main role="main" class="container mt-3">
          <div class="align-self-center col-md-12">
            <form action="/search" method="GET" class="my-0">
              <div class="form-group row justify-content-center">
                <div class="input-group my-3 col-sm-8">
                  <input type="text" class="form-control" id="keyword" name="keyword" autofocus="autofocus" />
                  <div class="input-group-append">
                    <button class="btn btn-secondary" type="submit"><i class="fa fa-fw fa-search"></i></button>
                  </div>
                </div>
              </div>
            </form>

            <div class="switch-button-container">
              <button id="mapButton" class="switch-button active" onclick="showSection('map')">橋梁マップ</button>
              <button id="recentPostsButton" class="switch-button" onclick="showSection('recent-posts')">最新の投稿</button>
              <button id="topUsersButton" class="switch-button" onclick="showSection('top-users')">ME-TOP3</button>

            </div>

            <div id="map-container" class="content-section">
              <div class="filter-container">
                <div class="filter-buttons">
                  <button class="filter-button" id="toggleSmallButton"
                    onclick="togglePinVisibility('small')">0~30m²</button>
                  <button class="filter-button" id="toggleMediumButton"
                    onclick="togglePinVisibility('medium')">30~100m²</button>
                  <button class="filter-button" id="toggleLargeButton"
                    onclick="togglePinVisibility('large')">100~1000m²</button>
                  <button class="filter-button" id="toggleVeryLargeButton"
                    onclick="togglePinVisibility('verylarge')">1000m²~</button>
                  <button class="filter-button" id="toggleHelth1" onclick="toggleHelth1('helth1')">健全度Ⅰ</button>
                  <button class="filter-button" id="toggleHelth2" onclick="toggleHelth2('helth2')">健全度Ⅱ</button>
                  <button class="filter-button" id="toggleHelth3" onclick="toggleHelth3('helth3')">健全度Ⅲ</button>
                  <button class="filter-button" id="toggleEmergency" onclick="toggleEmergency()">緊急輸送道路</button>
                  <button class="filter-button" id="toggleNonEmergency" onclick="toggleNonEmergency()">非緊急輸送道路</button>
                </div>
                <button class="filter-button reset-button" id="resetFiltersButton" onclick="resetFilters()">
                  <i class="fas fa-redo-alt"></i>
                </button>
              </div>
              <div id="map"></div>
            </div>

            <div class="recent-posts-container content-section" style="display: none;">
              <div class="recent-posts-header">
                <img src="/public/favicon.ico" alt="favicon">
                <h2>最新の投稿</h2>
                <img src="/public/favicon.ico" alt="favicon">
              </div>

            </div>

            <div class="top-users-container content-section" style="display: none;">
              <h2 class="section-title mt-5">
                <img src="/public/favicon.ico" alt="Icon">
                ME-TOP3
                <img src="/public/favicon.ico" alt="Icon">
              </h2>
              <ul>

              </ul>
            </div>







            <div class="hashiyasume-container content-section" style="display: none;">

              <div class="slot-banner">
                <img src="/public/hashiyasume.webp" alt="Hashiyasume Banner">
              </div>
              <div class="slot-machine">
                <div class="slot-column">
                  <div class="slot-container">
                    <div id="slot1" class="slot">
                      <div class="symbol">小橋</div>
                      <div class="symbol">B橋</div>
                      <div class="symbol">大橋</div>
                      <div class="symbol">ME</div>
                      <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                      <div class="symbol">小橋</div>
                      <div class="symbol">B橋</div>
                      <div class="symbol">大橋</div>
                      <div class="symbol">ME</div>
                      <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                    </div>
                  </div>
                  <button class="stop-button" onclick="stopSlot('slot1')"></button>
                </div>
                <div class="slot-column">
                  <div class="slot-container">
                    <div id="slot2" class="slot">
                      <div class="symbol">小橋</div>
                      <div class="symbol">B橋</div>
                      <div class="symbol">大橋</div>
                      <div class="symbol">ME</div>
                      <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                      <div class="symbol">小橋</div>
                      <div class="symbol">B橋</div>
                      <div class="symbol">大橋</div>
                      <div class="symbol">ME</div>
                      <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                    </div>
                  </div>
                  <button class="stop-button" onclick="stopSlot('slot2')"></button>
                </div>
                <div class="slot-column">
                  <div class="slot-container">
                    <div id="slot3" class="slot">
                      <div class="symbol">小橋</div>
                      <div class="symbol">B橋</div>
                      <div class="symbol">大橋</div>
                      <div class="symbol">ME</div>
                      <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                      <div class="symbol">小橋</div>
                      <div class="symbol">B橋</div>
                      <div class="symbol">大橋</div>
                      <div class="symbol">ME</div>
                      <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                    </div>
                  </div>
                  <button class="stop-button" onclick="stopSlot('slot3')"></button>
                </div>
                <div class="lever-container">
                  <div class="lever" onclick="spin()"></div>
                </div>
              </div>
              <div class="coin-display" id="coinDisplay">30</div>
              <div class="slot-footer">
                <img src="/public/hashiyasume2.webp" alt="Hashiyasume Banner">
              </div>
            </div>

          </div>

          <div id="loginModal" class="modal">
            <div class="modal-content">
              <div class="modal-header">
                <span class="close" onclick="closeModal()">&times;</span>

              </div>
              <h2 style="text-align:center">Voices of Bridges</h2>

              <div class="modal-body">
                <p>ログインすることで投稿機能を含むすべての機能をお使いいただけます。</p>
              </div>
              <div class="modal-footer">
                <button class="modal-button" onclick="redirectToLogin()">ログイン画面へ進む</button>
                <button class="modal-button" onclick="closeModal()">ログインせずに続ける</button>
              </div>
            </div>

        </main>