<%- include("partials/page-header", {
  user,
  title: t.medications.title,
  subtitle: "",
  showUserName: true
}) %>

    <div class="content p-4">

      <%- include("partials/flash") %>

      <div class="container-fluid p-0">

        <div class="card shadow">
          <div class="card-body">

            <!-- Suche -->
            <form method="GET" action="/medications" class="row g-2 mb-3">

              <div class="col-md-6">
                <input
                  type="text"
                  name="q"
                  class="form-control"
                  placeholder="🔍 <%= t.medications.searchplaceholder %>"
                  value="<%= query?.q || '' %>"
                >
              </div>

              <div class="col-md-3 d-flex gap-2">
                <button class="btn btn-primary w-100"><%= t.medications.search %></button>
                <a href="/medications" class="btn btn-secondary w-100"><%= t.medications.reset %></a>
              </div>

              <div class="col-md-3 d-flex align-items-center">
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    name="onlyActive"
                    value="1"
                    <%= query?.onlyActive === "1" ? "checked" : "" %>
                  >
                  <label class="form-check-label">
                    <%= t.global.active %>
                  </label>
                </div>
              </div>

            </form>

            <!-- Neu -->
            <a href="/medications/create" class="btn btn-success mb-3">
              ➕ <%= t.medications.newmedication %>
            </a>

            <div class="table-responsive">
              <table class="table table-bordered table-hover table-sm align-middle">

                <thead class="table-dark">
                  <tr>
                    <th><%= t.medications.medication %></th>
                    <th><%= t.medications.form %></th>
                    <th><%= t.medications.dosage %></th>
                    <th><%= t.medications.package %></th>
                    <th><%= t.medications.status %></th>
                    <th><%= t.medications.actions %></th>
                  </tr>
                </thead>

                <tbody>
                  <% rows.forEach(r => { %>

                    <tr class="<%= r.active ? '' : 'table-secondary' %>">

                      <form method="POST" action="/medications/update/<%= r.id %>">

                        <td><%= r.medication %></td>
                        <td><%= r.form %></td>

                        <td>
                          <input type="text" name="dosage" value="<%= r.dosage %>"
                            class="form-control form-control-sm" disabled>
                        </td>

                        <td>
                          <input type="text" name="package" value="<%= r.package %>"
                            class="form-control form-control-sm" disabled>
                        </td>

                        <td class="text-center">
                          <%= r.active ? t.global.active : t.global.inactive %>
                        </td>

                        <td class="d-flex gap-2">
                          <button class="btn btn-sm btn-outline-success save-btn" disabled>💾</button>
                          <button type="button" class="btn btn-sm btn-outline-warning lock-btn">🔓</button>

                      </form>

                      <form method="POST" action="/medications/toggle/<%= r.medication_id %>">
                        <button class="btn btn-sm <%= r.active ? 'btn-outline-danger' : 'btn-outline-success' %>">
                          <%= r.active ? "⛔" : "✅" %>
                        </button>
                      </form>

                        </td>
                    </tr>

                  <% }) %>
                </tbody>

              </table>
            </div>

          </div>
        </div>

      </div>
    </div>
    <script src="/js/services-lock.js"></script>
