{% load static %}

<!-- Welcome Section -->
<div class="row mb-4">
  <div class="col-12">
    <div class="content-card welcome-section">
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <div class="d-flex align-items-center">
          {% if user.image %}
            <div class="profile-picture-container profile-sm">
              <img src="{{ user.image.url }}" alt="{{ user.name }}" class="profile-picture">
            </div>
          {% else %}
            <div class="profile-picture-container profile-sm">
              <img src="{% static 'img/user.png' %}" alt="Default User" class="profile-picture">
            </div>
          {% endif %}
          <div class="flex-grow-1">
            <h2 class="mb-1">Welcome, {{ user.name }}!</h2>
            <p class="text-muted mb-0">
              {% if user.designation %}
                {{ user.designation }} <span class="ms-2 badge bg-info text-white">ID: {{ user.id }}</span>
              {% else %}
                Student <span class="ms-2 badge bg-info text-white">ID: {{ user.id }}</span>
              {% endif %}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>