{% extends "op_zz_frame.html" %}
{% block centercontent %}

<main class="ct-docs-content-col" role="main">
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
    <h1 class="ct-docs-page-h1-title" id="content">{{ _('Rule Sets') }}</h1>
    <p class="text-secondary mb-0">
      {{ _('Manage vendor- and model-specific configuration checks.') }}
    </p>
  </div>

  <div class="card shadow-sm mb-4">
    <div class="card-body p-0">
      <table class="table align-items-center mb-0">
        <thead>
          <tr>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Manufacturer') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Model') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('ID') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">{{ _('Actions') }}</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rule_sets %}
          <tr>
            <form method="post" class="align-middle">
              <td class="align-middle" style="min-width: 220px;">
                <input class="form-control form-control-sm" name="name" value="{{ r.name }}" placeholder="{{ _('Manufacturer') }}">
              </td>
              <td class="align-middle" style="min-width: 220px;">
                <input class="form-control form-control-sm" name="description" value="{{ r.description or '' }}" placeholder="{{ _('Model') }}">
              </td>
              <td class="align-middle text-secondary text-xs">
                {{ r.id }}
                <input type="hidden" name="rule_set_id" value="{{ r.id }}">
              </td>
              <td class="align-middle">
                <div class="d-flex justify-content-end gap-2">
                  <button name="action" value="rename" class="btn btn-primary btn-sm" type="submit">{{ _('Save') }}</button>
                  <button formaction="{{ url_for('checker_edit_rules', rule_set=r.id) }}" formmethod="get" class="btn btn-outline-secondary btn-sm" type="submit">{{ _('Edit rules') }}</button>
                  <button name="action" value="delete" onclick="return confirm('{{ _('Really delete this list?') }}');" class="btn btn-danger btn-sm" type="submit">{{ _('Delete') }}</button>
                </div>
              </td>
            </form>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-header bg-transparent">
      <h2 class="h5 mb-0">{{ _('New rule set') }}</h2>
      <p class="text-muted small mb-0">{{ _('Create an additional manufacturer/model combination.') }}</p>
    </div>
    <div class="card-body">
      <form method="post" class="row g-3 align-items-end">
        <div class="col-md-4 col-sm-6">
          <label class="form-label text-uppercase text-secondary text-xxs mb-1" for="new-rule-name">{{ _('Manufacturer') }}</label>
          <input id="new-rule-name" class="form-control" type="text" name="name" placeholder="{{ _('e.g. BMW') }}">
        </div>
        <div class="col-md-4 col-sm-6">
          <label class="form-label text-uppercase text-secondary text-xxs mb-1" for="new-rule-description">{{ _('Model') }}</label>
          <input id="new-rule-description" class="form-control" type="text" name="description" placeholder="{{ _('e.g. i Wallbox') }}">
        </div>
        <div class="col-md-4 col-sm-12 text-sm-end">
          <button name="action" value="create" class="btn btn-primary btn-sm pipelet-btn" type="submit">{{ _('Create') }}</button>
        </div>
      </form>
    </div>
  </div>
</main>

{% endblock %}