{% extends 'base.html' %}

{% load static %}
{% block title %}Profile{% endblock%}

{% block body%}
<div class="container">
  {% include 'navbar.html' %}

  <div class="columns has-margin-top-50 justify-center">
    <div class="column is-9">
      <div class="card">
        <div class="card-content">
          <div class="content has-text-centered">
            <div class="is-flex justify-center has-margin-bottom-10">
              <figure class="image is-128x128">
                <img
                  class="is-rounded"
                  style="height: 128px;"
                  src="{% static 'images/bobson.jpg' %}"
                />
              </figure>
            </div>

            <p class="title">{{ user.username }}</p>
            <p>
              <span class="icon">
                <i class="far fa-envelope"></i>
              </span>
              {{ user.email }}
            </p>
            <p>
              <span class="icon">
                <i class="far fa-calendar-plus"></i>
              </span>
              {{ user.date_joined }}
            </p>

            <div class="is-divider"></div>

            <nav class="level">
              <div class="level-item">
                <div>
                  <p class="heading">Posts</p>
                  <p class="title">23</p>
                </div>
              </div>
              <div class="level-item">
                <div>
                  <p class="heading">Reply</p>
                  <p class="title">12</p>
                </div>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
