<%- include('../shared/header'); %>
<header class="site-header d-flex flex-column justify-content-center align-items-center">
  <div class="container">
    <div class="row align-items-center">

      <div class="col-lg-5 col-12">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/posts">Homepage</a></li>

            <li class="breadcrumb-item active" aria-current="page">Profile</li>
          </ol>
        </nav>

        <h2 class="text-white">Profile</h2>
      </div>

    </div>
  </div>
</header>
<section class="vh-100" style="background-color: #f4f5f7;">
    <div class="container py-5 h-40">
      <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col col-lg-6 mb-4 mb-lg-0">
          <div class="card mb-3" style="border-radius: .5rem;">
            <div class="row g-0">
              <div class="col-md-4 gradient-custom text-center text-white"
                style="border-top-left-radius: .5rem; border-bottom-left-radius: .5rem;">
                <img src=<%= user.avatar %>
                  alt="Avatar" class="img-fluid my-5" style="width: 80px;" />
                <h5><%= user.first_name %> <%= user.last_name %></h5>
                <p><%= user.user_name %></p>
                <i class="far fa-edit mb-5"></i>
              </div>
              <div class="col-md-8">
                <div class="card-body p-4">
                  <h6>Information</h6>
                  <hr class="mt-0 mb-4">
                  <div class="row pt-1">
                    <div class="col-12 mb-3">
                      <h6>Email</h6>
                      <p class="text-muted"><%= user.email %></p>
                    </div>
                  </div>
                  <h6>Posts</h6>
                  <hr class="mt-0 mb-4">
                  <div class="row pt-1">
                    <div class="col-6 mb-3">
                      <h6>Latest Post</h6>
                      <% if (latestPost) { %>
                        <p class="text-muted"><strong>Title:</strong> <%= latestPost.title %></p>
                        <!-- <p class="text-muted"><strong>Content:</strong> <%= latestPost.body %></p> -->
                      <% } else { %>
                        <p class="text-muted">No posts available</p>
                      <% } %>
                    </div>
                    <div class="col-6 mb-3">
                      <h6>Total Posts</h6>
                      <p class="text-muted"><%= totalPosts %></p>
                    </div>
                  </div>
                  <div class="d-flex justify-content-start">
                    <a href="#!"><i class="fab fa-facebook-f fa-lg me-3"></i></a>
                    <a href="#!"><i class="fab fa-twitter fa-lg me-3"></i></a>
                    <a href="#!"><i class="fab fa-instagram fa-lg"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <%- include('../shared/footer'); %>