{% extends 'ddm_core/page_with_form.html' %}
{% load static %}

{% block page_title %}Edit Branding{% endblock page_title %}

{% block main_heading %}Branding{% endblock main_heading %}

{% block sub_heading %}
  Customize the look of your project
{% endblock sub_heading %}

{% block form_content %}

  <div id="project-details" class="ddm-section-container">
    <div class="row">
      {{ form.non_field_errors }}

      {% for field in form %}
        {% if field.name in "img_header_left,img_header_right" %}

          <div class="mb-3">
            <p class="ddm-form-group-header mb-2">{{ field.label }}</p>

            <div>{{ field.errors }}</div>

            <div class="row">

              <div class="col-auto">
                {% if field.value %}
                  <a href="{{ field.value.url }}" target="_blank">
                    <img src="{{ field.value.url }}" class="form-image-preview" alt="current image file" />
                  </a>
                {% else %}
                  <div class="form-image-preview form-image-preview-empty">No image selected</div>
                {% endif %}
              </div>
              <div class="col-6">
                <div><label for="{{ field.name }}-clear_id" class="fs-09">Reset</label> <input type="checkbox" name="{{ field.name }}-clear" id="{{ field.name }}-clear_id"></div>

                <label for="formFileSm" class="form-label mt-3 fs-09">Upload new</label>
                <input class="form-control form-control-sm" type="file" name="{{ field.name }}" id="id_{{ field.name }}">
              </div>

            </div>
          </div>

        {% endif %}
      {% endfor %}

    </div>
  </div>

{% endblock form_content %}