{% extends "base.html" %}
{% set form = form or none %}
{% block content %}
  <div class="card shadow-sm border-0">
    <div class="card-body p-4">
      <form method="post" action="{{ url_for('main.convert') }}" enctype="multipart/form-data" novalidate>
        <div class="mb-4">
          <label for="log_file" class="form-label fw-semibold">Log file</label>
          <input class="form-control" id="log_file" name="log_file" type="file" required>
          <div class="form-text">Each line must contain one record using shell-like key/value tokens.</div>
        </div>

        <div class="row g-3">
          <div class="col-md-3">
            <label for="mode" class="form-label">Mode</label>
            <select class="form-select" id="mode" name="mode">
              <option value="vendor" {% if form and form.mode == "vendor" %}selected{% endif %}>Vendor</option>
              <option value="full" {% if form and form.mode == "full" %}selected{% endif %}>Full</option>
            </select>
          </div>
          <div class="col-md-3">
            <label for="output_format" class="form-label">Format</label>
            <select class="form-select" id="output_format" name="output_format">
              <option value="text" {% if form and form.output_format == "text" %}selected{% endif %}>Text</option>
              <option value="csv" {% if form and form.output_format == "csv" %}selected{% endif %}>CSV</option>
            </select>
          </div>
          <div class="col-md-3">
            <label for="sort_by" class="form-label">Sort by</label>
            <select class="form-select" id="sort_by" name="sort_by">
              <option value="datetime" {% if not form or form.sort_by == "datetime" %}selected{% endif %}>Datetime</option>
              <option value="severity" {% if form and form.sort_by == "severity" %}selected{% endif %}>Severity</option>
            </select>
          </div>
          <div class="col-md-3">
            <label for="order" class="form-label">Order</label>
            <select class="form-select" id="order" name="order">
              <option value="asc" {% if not form or form.order == "asc" %}selected{% endif %}>Ascending</option>
              <option value="desc" {% if form and form.order == "desc" %}selected{% endif %}>Descending</option>
            </select>
          </div>
        </div>

        <hr class="my-4">

        <div class="row g-3">
          <div class="col-md-6">
            <label for="policy_cs" class="form-label">Policy filter, case-sensitive</label>
            <input
              class="form-control"
              id="policy_cs"
              name="policy_cs"
              type="text"
              value="{{ form.policy_cs if form else '' }}"
            >
          </div>
          <div class="col-md-6">
            <label for="policy_ci" class="form-label">Policy filter, case-insensitive</label>
            <input
              class="form-control"
              id="policy_ci"
              name="policy_ci"
              type="text"
              value="{{ form.policy_ci if form else '' }}"
            >
          </div>
          <div class="col-md-6">
            <label for="severity_cs" class="form-label">Severity filter, case-sensitive</label>
            <input
              class="form-control"
              id="severity_cs"
              name="severity_cs"
              type="text"
              value="{{ form.severity_cs if form else '' }}"
            >
          </div>
          <div class="col-md-6">
            <label for="severity_ci" class="form-label">Severity filter, case-insensitive</label>
            <input
              class="form-control"
              id="severity_ci"
              name="severity_ci"
              type="text"
              value="{{ form.severity_ci if form else '' }}"
            >
          </div>
        </div>

        <div class="alert alert-light border mt-4 mb-0" role="note">
          Use only one policy filter and one severity filter at a time. Matching happens as a partial substring.
        </div>

        <div class="mt-4 d-flex gap-2">
          <button class="btn btn-primary" type="submit">Convert log</button>
          <button class="btn btn-outline-secondary" type="reset">Reset</button>
        </div>
      </form>
    </div>
  </div>
{% endblock %}