<!DOCTYPE html>
<html lang="en" data-theme="auto">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ImpTune</title>
  <link rel="stylesheet" href="/static/pico.min.css">
  <link rel="stylesheet" href="/static/app.css">
  <script defer src="/static/alpine.min.js"></script>
  <script src="/static/htmx.min.js"></script>
</head>
<body>
  <div class="layout">
    <nav class="sidebar">
      <div class="sidebar-brand">
        <strong>ImpTune</strong>
      </div>
      <ul class="sidebar-nav">
        <li><a href="/" {% if request.url.path == "/" %}class="active"{% endif %}>Dashboard</a></li>
        <li><a href="/drivers" {% if request.url.path == "/drivers" %}class="active"{% endif %}>Drivers</a></li>
        <li><a href="/printers" {% if request.url.path == "/printers" %}class="active"{% endif %}>Printers</a></li>
        <li><a href="/clients" {% if request.url.path == "/clients" %}class="active"{% endif %}>Clients</a></li>
        <li><a href="/packages" {% if request.url.path == "/packages" %}class="active"{% endif %}>Packages</a></li>
      </ul>
    </nav>
    <main class="main-content">
      {% block content %}{% endblock %}
    </main>
  </div>
</body>
</html>
