<main role="main" class="container mt-3">
        <h1>My Pocket</h1>

        <div class="nav-tabs">
          <button class="tab-button active" data-target="#coins-section">所有コイン</button>
          <button class="tab-button" data-target="#likes-section">獲得いいね</button>
          <button class="tab-button" data-target="#posts-section">私の投稿</button>
          <button class="tab-button" data-target="#user-info-section">ユーザー情報</button>
        </div>
        <div id="coins-section" class="info-section" style="display: block; opacity: 1;">
          <h2>所有コイン</h2>
          <p>
            <%= coins %> コイン
          </p>
        </div>
        <div id="likes-section" class="info-section">
          <h2>獲得いいね</h2>
          <p>
            <%= totalLikes %> いいね
          </p>
        </div>
        <div id="posts-section" class="posts-section">
          <h2>私の投稿</h2>
          <% if (posts.length> 0) { %>
            <ul>
              <% posts.forEach(function(post) { %>
                <li>
                  <a href="/bridges/<%= post.shop_id %>">
                    <strong>橋梁名:</strong>
                    <%= post.bridge_name %><br>
                      <strong>損傷程度:</strong>
                      <%= post.score %><br>
                        <strong>投稿内容:</strong>
                        <%= post.description %> <br>
                          <strong>投稿日時:</strong>
                          <%= moment(post.post).format('YYYY-MM-DD HH:mm') %>
                  </a>
                </li>
                <% }) %>
            </ul>
            <% } else { %>
              <p>まだ投稿がありません。</p>
              <% } %>
        </div>
        <div id="user-info-section" class="info-section">
          <h2>ユーザー情報</h2>
          <form id="user-info-form" action="/account/update" method="POST">
            <p>
              <strong>ID:</strong>
              <%= user.id %>
            </p>
            <p>
              <strong>名前:</strong>
              <span id="user-name">
                <%= user.name %>
              </span>
              <input type="text" id="edit-name" name="name" value="<%= user.name %>" style="display: none;">
              <button type="button" class="edit-button" onclick="editField('name')">編集</button>
            </p>
            <p>
              <strong>メールアドレス:</strong>

              <span id="user-email">
                <%= user.email %>
              </span>

            </p>
            <p>
              <strong>自己紹介:</strong>
              <span id="user-description">
                <%= user.description %>
              </span>
              <textarea id="edit-description" name="description"
                style="display: none;"><%= user.description %></textarea>
              <button type="button" class="edit-button" onclick="editField('description')">編集</button>
            </p>

            <p>
              <strong>管理者権限:</strong>
              <%= user.is_admin ? '有' : '無' %>
            </p>
            <button type="submit" class="save-button" id="save-changes-button">変更を保存</button>
          </form>
        </div>
      </main>