{% extends "base.html" %}
{% block content %}
  <div class="card">
    <h1>{% if object %}Edit item{% else %}New item{% endif %}</h1>
    <form method="post" class="grid">
      {% csrf_token %}
      <div>
        {{ form.template.label_tag }}
        {{ form.template }}
      </div>
      <div>
        {{ form.title.label_tag }}
        {{ form.title }}
      </div>
      <div class="grid grid-3">
        <div>{{ form.brand.label_tag }}{{ form.brand }}</div>
        <div>{{ form.category.label_tag }}{{ form.category }}</div>
        <div>{{ form.condition.label_tag }}{{ form.condition }}</div>
      </div>
      <div class="grid grid-3">
        <div>{{ form.size.label_tag }}{{ form.size }}</div>
        <div>{{ form.color.label_tag }}{{ form.color }}</div>
        <div>{{ form.purchase_price.label_tag }}{{ form.purchase_price }}</div>
      </div>
      <div>{{ form.estimated_resale_price.label_tag }}{{ form.estimated_resale_price }}</div>

      {% if template_obj and template_obj.field_definitions %}
        <fieldset class="card">
          <legend>Template properties ({{ template_obj.name }})</legend>
          {% for fd in template_obj.field_definitions %}
            <div>
              <label for="id_prop_{{ fd.name }}">{{ fd.label|default:fd.name }}</label>
              {% if fd.type == 'boolean' %}
                <input type="checkbox" name="prop_{{ fd.name }}" id="id_prop_{{ fd.name }}" {% if fd.default %}checked{% endif %} />
              {% elif fd.type == 'number' %}
                <input type="number" step="0.01" name="prop_{{ fd.name }}" id="id_prop_{{ fd.name }}" value="{{ fd.default|default:'' }}" />
              {% else %}
                <input type="text" name="prop_{{ fd.name }}" id="id_prop_{{ fd.name }}" value="{{ fd.default|default:'' }}" />
              {% endif %}
            </div>
          {% endfor %}
        </fieldset>
      {% endif %}

      <div>{{ form.notes.label_tag }}{{ form.notes }}</div>
      <button type="submit">{% if object %}Update item{% else %}Create item{% endif %}</button>
    </form>
  </div>
{% endblock %}