{{ template "header.html" . }}


<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-sm">
    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Your Company">
    <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Edit Tags</h2>
  </div>

  <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
  {{ range .data.tags }}
    <form action="/tags/{{ .ID }}" method="POST">
      <div class="max-w-md mx-auto mt-4">
        <div class="flex">

          <span class="bg-{{ .Color }}-100 text-{{ .Color }}-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm
            dark:bg-{{ .Color }}-900 dark:text-{{ .Color }}-300">Preview</span>
          <input type="text" id="name" name="name" value="{{ .Name }}" class="flex-grow border border-gray-300 rounded-l-md p-2 focus:outline-none focus:ring focus:ring-blue-500">
          <select name="color" required>
            <option selected value="{{ .Color }}">{{ .Color }}</option>
            <option value="1">Default</option>
            <option value="red">red</option>
            <option value="orange">orange</option>
            <option value="amber">amber</option>
            <option value="yellow">yellow</option>
            <option value="lime">lime</option>
            <option value="green">green</option>
            <option value="emerald">emerald</option>
            <option value="teal">teal</option>
            <option value="cyan">cyan</option>
            <option value="sky">sky</option>
            <option value="blue">blue</option>
            <option value="indigo">indigo</option>
            <option value="violet">violet</option>
            <option value="purple">purple</option>
            <option value="fuchsia">fuchsia</option>
            <option value="pink">pink</option>
            <option value="rose">rose</option>
            <option value="slate">slate</option>
            <option value="gray">gray</option>
            <option value="zinc">zinc</option>
            <option value="neutral">neutral</option>
            <option value="stone">stone</option>
          </select>
          <button type="submit" name="action" value="update" class="bg-blue-600 text-white ml-4 mr-4 rounded px-4 hover:bg-blue-700">Update</button>
          <button type="submit" name="action" value="delete" class="bg-red-800 text-white rounded px-4 hover:bg-red-900">Delete</button>
        </div>
    </form>
  {{ end }}
    <form action="/tags" method="POST">
      <div class="max-w-md mx-auto mt-4">
        <div class="flex">
          <input type="text" id="name" name="name" placeholder="add new tag" class="flex-grow border border-gray-300 rounded-l-md p-2 focus:outline-none focus:ring focus:ring-blue-500">
            <button type="submit" class="bg-green-600 text-white ml-4 mr-4 rounded px-4 hover:bg-green-700">Add</button>
        </div>
    </div>
    </form>
  </div>
{{ template "footer.html" . }}