{% extends 'base.html' %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">

  <!-- Header -->
  <div class="flex items-center gap-3">
    <div>
      <h1 class="text-xl font-bold text-gray-900 flex items-center gap-2">
        <i class="fas fa-cog text-gray-500"></i> Nginx Monitor Settings
      </h1>
      <p class="text-sm text-gray-400 mt-0.5">Cluster connection &amp; local testing</p>
    </div>
  </div>

  {% for msg in messages %}
  <div class="px-4 py-2 rounded-md text-sm border
    {% if msg.tags == 'success' %}bg-green-50 text-green-800 border-green-200
    {% elif msg.tags == 'error' %}bg-red-50 text-red-800 border-red-200
    {% else %}bg-blue-50 text-blue-800 border-blue-200{% endif %}">
    {{ msg }}
  </div>
  {% endfor %}

  <!-- K8s pod settings -->
  <div class="bg-white shadow-sm rounded-lg border border-gray-200 overflow-hidden">
    <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
      <h2 class="text-sm font-semibold text-gray-700">Cluster Connection</h2>
      <p class="text-xs text-gray-400 mt-0.5">
        Configured once. The scheduler uses these to run
        <code class="bg-gray-100 px-1 rounded">kubectl logs</code> on a timer.
      </p>
    </div>
    <form method="post" class="p-6 space-y-4">
      {% csrf_token %}
      {% for field in form %}
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">{{ field.label }}</label>
        {{ field }}
        {% if field.help_text %}<p class="text-xs text-gray-400 mt-1">{{ field.help_text }}</p>{% endif %}
        {% for error in field.errors %}<p class="text-xs text-red-600 mt-1">{{ error }}</p>{% endfor %}
      </div>
      {% endfor %}
      <div class="pt-1">
        <button type="submit" name="save_settings"
                class="inline-flex items-center px-5 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700">
          <i class="fas fa-save mr-2"></i> Save Settings
        </button>
      </div>
    </form>
  </div>

  <!-- Local testing — paste logs -->
  <div class="bg-white shadow-sm rounded-lg border border-gray-200 overflow-hidden">
    <div class="px-6 py-4 bg-amber-50 border-b border-amber-200 flex items-start gap-3">
      <i class="fas fa-flask text-amber-500 mt-0.5"></i>
      <div>
        <h2 class="text-sm font-semibold text-amber-800">Test Locally — Paste Log Lines</h2>
        <p class="text-xs text-amber-700 mt-0.5">
          No kubectl needed. Paste raw nginx ingress log lines and they'll be parsed and stored
          immediately, so you can preview the dashboard with real data.
        </p>
      </div>
    </div>
    <form method="post" class="p-6 space-y-4">
      {% csrf_token %}
      {% for field in paste_form %}
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">{{ field.label }}</label>
        <div class="relative">{{ field }}</div>
        {% for error in field.errors %}<p class="text-xs text-red-600 mt-1">{{ error }}</p>{% endfor %}
      </div>
      {% endfor %}
      <div class="flex items-center gap-3">
        <button type="submit" name="paste_logs"
                class="inline-flex items-center px-5 py-2 bg-amber-600 text-white text-sm font-medium rounded-md hover:bg-amber-700">
          <i class="fas fa-upload mr-2"></i> Ingest Logs
        </button>
        <span class="text-xs text-gray-400">Duplicates are automatically skipped.</span>
      </div>
    </form>

    <!-- CLI alternative hint -->
    <div class="px-6 pb-5">
      <p class="text-xs text-gray-500 font-medium mb-2">Or via the management command:</p>
      <pre class="bg-gray-900 text-green-300 text-xs rounded-md p-3 overflow-x-auto"><code># From a file
python manage.py nginxmon_ingest --file /path/to/nginx.log

# Pipe from kubectl directly
kubectl logs -n ingress-nginx \
  -l app.kubernetes.io/name=ingress-nginx \
  --container controller | python manage.py nginxmon_ingest

# Re-run the configured source (kubectl or file)
python manage.py nginxmon_ingest --from-settings</code></pre>
    </div>
  </div>

</div>
{% endblock %}