{% load static %}
<div class="container-fluid">
  <!-- Sidebar toggle -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
        <i class="bi bi-list" style="font-size:20px;"></i>
      </a>
    </li>
  </ul>

  <!-- Unit info pills (center on large screens) -->
  <div class="header-unit-info d-none d-xl-flex mx-auto">
    {% if request.user.battalion %}
    <span class="header-unit-pill pill-battalion">
      <i class="bi bi-building"></i>{{ request.user.battalion.name }}
    </span>
    {% endif %}
    {% if request.user.company %}
    <span class="header-unit-pill pill-company">
      <i class="bi bi-diagram-2"></i>{{ request.user.company.name }}
    </span>
    {% endif %}
  </div>

  <!-- Right side -->
  <ul class="navbar-nav ms-auto align-items-center gap-1">

    <!-- Live clock -->
    <li class="nav-item d-none d-lg-block">
      <span class="header-datetime">
        <i class="bi bi-clock-fill" style="color:#1565c0;font-size:12px;"></i>
        <span id="clock-display"></span>
      </span>
    </li>

    <!-- Fullscreen -->
    <li class="nav-item">
      <a class="nav-link" href="#" data-lte-toggle="fullscreen" title="Toggle Fullscreen">
        <i data-lte-icon="maximize"  class="bi bi-arrows-fullscreen"></i>
        <i data-lte-icon="minimize"  class="bi bi-fullscreen-exit" style="display:none;"></i>
      </a>
    </li>

    <!-- User dropdown -->
    <li class="nav-item dropdown user-menu">
      <a href="#" class="nav-link dropdown-toggle d-flex align-items-center gap-2 pe-1"
         data-bs-toggle="dropdown" style="text-decoration:none;">
        {% if request.user.picture %}
          <img src="{{ request.user.picture.url }}"
               style="width:36px;height:36px;border-radius:50%;object-fit:cover;
                      border:2px solid rgba(21,101,192,0.3);box-shadow:0 2px 8px rgba(0,0,0,0.12);"
               alt="User">
        {% elif request.user.member.picture %}
          <img src="{{ request.user.member.picture.url }}"
               style="width:36px;height:36px;border-radius:50%;object-fit:cover;
                      border:2px solid rgba(21,101,192,0.3);box-shadow:0 2px 8px rgba(0,0,0,0.12);"
               alt="User">
        {% else %}
          <span class="nav-user-avatar"><i class="bi bi-person-fill"></i></span>
        {% endif %}
        <span class="d-none d-md-inline" style="font-size:13px;font-weight:600;color:#1a2332;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
          {{ request.user.name|truncatechars:18 }}
        </span>
        <i class="bi bi-chevron-down d-none d-md-inline" style="font-size:10px;color:#94a3b8;"></i>
      </a>
      {% include "basic/profile.html" %}
    </li>

  </ul>
</div>

<script>
(function updateClock() {
  function pad(n){ return n < 10 ? '0'+n : n; }
  function tick() {
    var d = new Date();
    var days   = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var el = document.getElementById('clock-display');
    if (!el) return;
    el.textContent = days[d.getDay()] + ' ' + pad(d.getDate()) + ' ' + months[d.getMonth()] + ' '
                   + d.getFullYear() + '  ' + pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
  }
  tick();
  setInterval(tick, 1000);
})();
</script>