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

<div class="container mt-4">
  <%- include("partials/flash") %>
  <h4><%= t.services.title %></h4>

  <form method="GET" action="/services" class="row g-2 mb-3">
    <div class="col-md-6">
      <input type="text" name="q" class="form-control"
        placeholder="🔍 <%= t.services.searchplaceholder %>"
        value="<%= query?.q || '' %>">
    </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>
    <div class="col-md-3 d-flex gap-2">
      <button class="btn btn-primary w-100"><%= t.global.search %></button>
      <a href="/services" class="btn btn-secondary w-100"><%= t.global.reset %></a>
    </div>
  </form>

  <a href="/services/create" class="btn btn-success mb-3">
    ➕ <%= t.services.newservice %>
  </a>

  <table class="table table-bordered table-sm align-middle">
    <colgroup>
      <col style="width:35%">
      <col style="width:25%">
      <col style="width:10%">
      <col style="width:10%">
      <col style="width:8%">
      <col style="width:12%">
    </colgroup>
    <thead class="table-light">
      <tr>
        <th><%= t.services.namede %></th>
        <th><%= t.services.namees %></th>
        <th><%= t.services.price %></th>
        <th><%= t.services.pricec70 %></th>
        <th><%= t.services.status %></th>
        <th><%= t.services.actions %></th>
      </tr>
    </thead>
    <tbody>
      <% services.forEach(s => { %>
      <tr class="<%= s.active ? '' : 'table-secondary' %>">
        <td><%= s.name_de %></td>
        <td><%= s.name_es || "-" %></td>

        <form method="POST" action="/services/<%= s.id %>/update-price">
          <td>
            <input name="price" value="<%= s.price %>"
              class="form-control form-control-sm text-end w-100" disabled>
          </td>
          <td>
            <input name="price_c70" value="<%= s.price_c70 %>"
              class="form-control form-control-sm text-end w-100" disabled>
          </td>
          <td class="text-center">
            <%= s.active ? t.global.active : t.global.inactive %>
          </td>
          <td class="d-flex justify-content-center gap-2">
            <button type="submit" class="btn btn-sm btn-primary save-btn" disabled>💾</button>
            <button type="button" class="btn btn-sm btn-outline-warning lock-btn"
              title="<%= t.services.editunlock %>">🔓</button>
          </td>
        </form>
      </tr>
      <% }) %>
    </tbody>
  </table>

</div>
