{% extends "base/base.html" %}

{% block title %}panel{% endblock %}

{% block content %}
<main class="flex grow h-full">
  <aside class="border-r-4 border-r-ctp-mantle w-80">
    <ul id="client-list"></ul>
  </aside>
  <div id="panel-content" class="flex flex-row grow">
    <nav class="border-r-4 border-r-ctp-mantle">
      <ul>
        <li class="px-4 py-2 hover:bg-ctp-mantle cursor-pointer" panel="summary">Summary</li>
        <li class="px-4 py-2 hover:bg-ctp-mantle cursor-pointer" panel="settings">Settings</li>
      </ul>
    </nav>
    <div id="summary" class="panels hidden grow p-4">
      <h1 class="text-2xl font-bold mb-4">Summary</h1>
      <div class="flex grow flex-col gap-4">
        <div class="flex items-center justify-between">
          <h2 class="text-xl font-semibold"><span id="client-hostname"></span> (<span id="client-status"></span>)</h2>
          <h2 class="text-xl font-semibold">Last seen: <span id="client-last_seen"></span></h2>
        </div>
      </div>
    </div>
    <div id="settings" class="panels hidden">
      <h1 class="text-2xl font-bold mb-4">Settings</h1>
      <div class="flex flex-col gap-4">
        <!-- Settings content will be dynamically inserted here -->
      </div>
    </div>
  </div>
</main>
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('static', filename='js/panel.js') }}"></script>
{% endblock %}