{% extends "skins/base.html" %}
{% load i18n admin_urls admin_static %}
{% load staticfiles %}

{% block extra_css %}
    <link rel="stylesheet" href= "{% static "css/free-basics.css" %}"/>
{% endblock %}

{% block navbar %}
<ul class="nav" id="main-menu-left">
<li><a href="{% url 'home' %}">Home</a></li>
<li class="active"><a href="#">New</a></li>
</ul>
{% endblock %}

{% block content %}
<div class="row">
<div class="col-md-6">
  <!-- general form elements -->
  <div class="box box-primary">
    <div class="box-header with-border">
      <h3 class="box-title">Edit your app</h3>
    </div>

    <form role="form" method="POST">
    <div class="box-body">
      {% if form.errors %}
          <div class="alert alert-error">
              Please correct the errors below
          </div>
      {% endif %}
      {% if form.non_field_errors %}
          <div class="alert alert-error">
              {{ form.non_field_errors|join:", " }}
          </div>
      {% endif %}

      {% include "form_field.html" with field=form.name %}
      <div class="row">
      </div>

      <fieldset class="input-xxlarge">
        <legend>Select template</legend>
          {% for template in form.selected_template %}
              <div class="template-radio">
                {% with "img/"|add:template.choice_label|add:".jpg" as src %}
                    <img src="{% static src %}"
                         alt="template option {{ forloop.counter }}" class="template-unselected"/>
                {% endwith %}
                {% include "form_field.html" with field=template%}
              </div>
          {% endfor %}
      </fieldset>

      {% csrf_token %}
      <br/>
      <p><input type="submit" value="Submit" class="btn btn-primary"/></p>
      </div>
    </form>

  </div>
</div>
</div>
{% block script %}
    <script type="text/javascript">
        var imgTag = ".template-radio img";

        $().ready(function(){
           $(".template-radio input").filter(function(index){
              if($(this).attr("checked")) {
                  $(this).closest(".template-radio").addClass("template-selected-text")
                          .find("img").removeClass("template-unselected")
                          .addClass("template-selected");
              }
           });
        });

        $(imgTag).click(function (evt){
            $(imgTag).removeClass("template-selected")
                    .addClass("template-unselected")
                    .parent().removeClass("template-selected-text");
            $(evt.target).removeClass("template-unselected");
            $(evt.target).addClass("template-selected")
                    .parent().addClass("template-selected-text").find("input:radio").prop('checked', true);
        });
    </script>
{% endblock %}
{% endblock %}
