<!DOCTYPE html>
<html lang="ja">
<head>
  <%- include("../_share/metadata.ejs") %>
  <title>Their Pocket - <%= user.name %></title>
  <%- include("../_share/stylesheets.ejs") %>
  <style>
    body {
      font-family: 'Sawarabi Mincho', serif;
      background-color: #f8f9fa;
      overflow-x: hidden;
    }

    .outerframe {
      min-height: 100%;
      position: relative;
    }

    .outerframe>.container {
      padding-bottom: 10rem;
    }

    .outerframe>footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 8rem;
    }

    h1 {
      font-size: 2.5rem;
      margin-bottom: 2rem;
      text-align: center;
      color: #343a40;
      animation: fadeInDown 1s;
    }

    .info-section, .posts-section {
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 2rem;
      padding: 1.5rem;
      opacity: 0;
      animation: fadeIn 1s forwards;
    }

    .info-section h2, .posts-section h2 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
      color: #0056b3;
    }

    .info-section p, .posts-section p {
      font-size: 1.2rem;
      color: #495057;
    }

    .posts-section ul {
      list-style: none;
      padding: 0;
    }

    .posts-section li {
      background-color: #fff;
      border: 1px solid #c7bbbb;
      border-radius: 10px;
      margin-bottom: 1rem;
      padding: 1rem;
      animation: fadeInUp 1s;
    }

    .posts-section li a {
      color: #0056b3;
      text-decoration: none;
    }

    .posts-section li a:hover {
      text-decoration: underline;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

  </style>
</head>
<body>
  <div class="outerframe">
    <%- include("../_share/navbar.ejs") %>
    <main role="main" class="container mt-3">
      <h1>Their Pocket</h1>

      <div class="info-section">
        <h2>ユーザー情報</h2>
        <p><strong>名前:</strong> <%= user.name %></p>
        <p><strong>自己紹介:</strong> <%= user.description %></p>
        <p><strong>所有コイン:</strong> <%= user.coins %> コイン</p>
        <p><strong>獲得いいね:</strong> <%= totalLikes %> いいね</p>
        <% if (isFollowing) { %>
          <form action="/account/unfollow/<%= user.id %>" method="POST">
            <button type="submit" class="btn btn-danger">フォロー解除</button>
          </form>
        <% } else { %>
          <form action="/account/follow/<%= user.id %>" method="POST">
            <button type="submit" class="btn btn-success">フォロー</button>
          </form>
        <% } %>
      </div>

      <div 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>
    </main>
    <%- include("../_share/footer.ejs") %>
  </div>
  <%- include("../_share/javascripts.ejs") %>
</body>
</html>
