{% extends 'base.html' %} {% block content %}
<h2>Taxonomy</h2>
<section>
  <h3>Regions</h3>
  <form method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
    <input type="hidden" name="action" value="add_region" />
    <input type="text" name="region_name" placeholder="New region" required />
    <label for="region_color">Color:</label>
    <input type="color" name="region_color" id="region_color" value="#ffffff" />
    <button type="submit">Add Region</button>
  </form>
  <div id="regions-table">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Rename</th>
        <th>Color</th>
      </tr>
    </thead>
    <tbody>
      {% for r in regions %}
      <tr>
        <td>{{ r.region_id }}</td>

        <td>{{ r.name }}</td>
        <td>
          <form
            method="post"
            style="display: flex; gap: 0.5rem; align-items: center"
          >
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <input type="hidden" name="action" value="rename_region" />
            <input type="hidden" name="region_id" value="{{ r.region_id }}" />
            <input
              type="text"
              name="new_region_name"
              placeholder="New name"
              required
            />
            <button type="submit">Rename</button>
          </form>
        </td>
        <td>
          <form
            method="post"
            style="display: flex; gap: 0.5rem; align-items: center"
          >
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <input type="hidden" name="action" value="change_region_color" />
            <input type="hidden" name="region_id" value="{{ r.region_id }}" />
            <input
              type="color"
              name="new_region_color"
              value="{{ r.color }}"
              required
            />
            <button type="submit">Change Color</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</section>
<section>
  <h3>Keywords</h3>
  <form method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
    <input type="hidden" name="action" value="add_keyword" />
    <input type="text" name="keyword_name" placeholder="New keyword" required />
    <label for="keyword_color">Color:</label>
    <input
      type="color"
      name="keyword_color"
      id="keyword_color"
      value="#ffffff"
    />
    <button type="submit">Add Keyword</button>
  </form>
  <div id="keywords-table">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Rename</th>
        <th>Color</th>
      </tr>
    </thead>
    <tbody>
      {% for k in keywords %}
      <tr>
        <td>{{ k.keyword_id }}</td>
        <td>{{ k.name }}</td>
        <td>
          <form
            method="post"
            style="display: flex; gap: 0.5rem; align-items: center"
          >
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <input type="hidden" name="action" value="rename_keyword" />
            <input type="hidden" name="keyword_id" value="{{ k.keyword_id }}" />
            <input
              type="text"
              name="new_keyword_name"
              placeholder="New name"
              required
            />
            <button type="submit">Rename</button>
          </form>
        </td>
        <td>
          <form
            method="post"
            style="display: flex; gap: 0.5rem; align-items: center"
          >
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <input type="hidden" name="action" value="change_keyword_color" />
            <input type="hidden" name="keyword_id" value="{{ k.keyword_id }}" />
            <input
              type="color"
              name="new_keyword_color"
              value="{{ k.color }}"
              required
            />
            <button type="submit">Change Color</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</section>
{% endblock %} {% block footer_scripts %}
<script src="{{ url_for('static', filename='taxonomy.js') }}"></script>
</script>
{% endblock %}