{% extends 'base.html' %}

{% block content %}
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  <li class="breadcrumb-item"><a href="{% url 'inventory:tags' %}">Inventory tags</a>
  {% if object %}
    <li class="breadcrumb-item"><a href="{{ object.get_absolute_url }}">{{ object }}</a>
    <li class="breadcrumb-item active">Update</li>
  {% else %}
    <li class="breadcrumb-item active">Create</li>
  {% endif %}
</ol>

<div class="d-flex align-items-center mb-3">
    <h2 class="m-0">{% if object %}Update{% else %}Create{% endif %} Tag</h2>
</div>

<form method="POST" class="update-form">{% csrf_token %}

    {{ form }}

    <div class="form-group mb-3">
        <label for="id_color">Color presets:</label>
        <div>
            {% for color_name, color_code in color_presets.items %}
                <span class="label color-preset" data-color="{{ color_code }}" style="background-color:#{{ color_code }};padding: 0 10px;margin:0 0 5px 0;">&nbsp;</span>
            {% endfor %}
        </div>
    </div>

    <a href="{% url 'inventory:tags' %}" class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-primary">{% if object %}Update{% else %}Create{% endif %}</button>
</form>

{% endblock %}

{% block extrajs %}
<script nonce="{{ request.csp_nonce }}">
  function apply_color_preset(preset_elm) {
    var color = preset_elm.data("color");
    $('#id_color').val(color);
  }

  $(document).ready(function(){
    $(".color-preset").click(function(event){
      event.preventDefault();
      apply_color_preset($(this));
    });
  });
</script>
{% endblock %}