{% block content %}

<style>
.user-picture {
  width: 100px;
  height: 100px;
  border: 3px solid #fff;
  margin-top: -50px;
  object-fit: cover;
}

table .info{
    margin-left: -240px;
}

/* Specific to the .dashboard-description class */
.dashboard-description strong {
  font-weight: 600;
}

/* Adjustments for headers within cards */
.card .h5 {
  font-size: 1.25rem;
  color: #333;
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>

{% if user.is_authenticated %}
<div class="row">
  <div class="card-header">
    <table>
        <tr>
            <td>
                <img src="{{ user.picture.path }}" class="user-picture">
            </td>
            <td class="info">
                <p>{{ user.get_full_name|title }}</p>
                <p><strong>Last login:</strong> {{ user.last_login|date }}</p>
                <p><strong>Role:</strong> {{ user.get_user_role }}</p>
            </td>
        </tr>
    </table>
    <hr>
  </div>

  <div class="card">
    <div class="card-body">
      {% if user.is_teacher %}
      <p class="h5">My Subjects</p>
      {% if Subjects %}
      <ul class="list-group">
        {% for course in Subjects %}
        <li class="list-group-item">{{ course }}</li>
        {% endfor %}
      </ul>
      {% else %}
      <div class="text-danger">No Subjects assigned!</div>
      {% endif %}
      <hr class="my-0">
      {% endif %}

      <p class="h5">Personal Info</p>
      <div class="dashboard-description">
        <p><strong>First Name:</strong> {{ user.first_name|title }}</p>
        <p><strong>Last Name:</strong> {{ user.last_name|title }}</p>
        <p><strong>ID No.:</strong> {{ user.username }}</p>
      </div>

      {% if user.is_student %}
      <hr>
      <p class="h5">Applicant Info</p>
      <div class="dashboard-description">
        <p><strong>School:</strong> Hawas Preparatory School</p>
        <p><strong>Level:</strong> {{ level.level }}</p>
      </div>
      {% endif %}

      <hr>
      <p class="h5">Contact Info</p>
      <div class="dashboard-description">
        <p><strong>Email:</strong> {{ user.email }}</p>
        <p><strong>Tel No.:</strong> {{ user.phone }}</p>
        <p><strong>Address/city:</strong> {{ user.address }}</p>
      </div>

      <hr>
      <p class="h5">Important Dates</p>
      <div class="dashboard-description">
        <p><strong>Last login:</strong> {{ user.last_login }}</p>
        {% if current_semester and current_session %}
        <p><strong>Academic Year:</strong> {{ current_semester }} Semester {{ current_session }}</p>
        {% endif %}
        <p><strong>Registered Date:</strong> {{ user.date_joined|date }}</p>
      </div>
    </div>
  </div>
</div>
{% endif %}

{% endblock content %}