{% extends "base.html" %}
{% block title %}Create Form Template – Echo 1.1{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-4xl font-semibold">Create a Submission Form</h1>
    </div>
    <a href="/dashboard/it_agent" class="text-m text-blue-400 hover:text-blue-300">Back to Dashboard</a>
  </div>

  <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-4 shadow-sm">
    <form method="post" action="/form_create" class="space-y-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label class="block text-xl font-medium text-zinc-300" for="name">Template Name</label>
          <input id="name" name="name" type="text" required placeholder="Name" class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 text-lg shadow-sm focus:border-blue-500 focus:ring-blue-500" />
        </div>
      </div>
      <div>
        <label class="block text-xl font-medium text-zinc-300" for="description">Description(Optional)</label>
        <input id="description" name="description" type="text" placeholder="Optional description" class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 text-lg shadow-sm focus:border-blue-500 focus:ring-blue-500" />
      </div>

      <div class="flex gap-3 md:justify-end">
        <a href="/form_menu" class="inline-flex items-center rounded-md border border-zinc-800 px-3 py-2 text-m text-zinc-300 hover:bg-zinc-800">Cancel</a>
        <button type="submit" class="inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-m text-white hover:bg-blue-700">Create Template</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}