{% load i18n %}

<form action="{% url "dashboard.views.template-import" %}" method="POST"
  id="template-choose-form">
  {% csrf_token %}
  <div class="template-choose-list">
    {% for t in templates %}
    <div class="panel panel-default template-choose-list-element">
      <input type="radio" name="parent" value="{{ t.pk }}"/>
      {{ t.name }} - {{ t.system }}
      <small>Cores: {{ t.num_cores }} RAM: {{ t.ram_size }}</small>
      <div class="clearfix"></div>
    </div>
    {% endfor %}
    <button type="submit" id="template-choose-next-button" class="btn btn-success pull-right">{% trans "Next" %}</button>
    <div class="clearfix"></div>
  </div>
</form>

<script>
  $(function() {
    $(".template-choose-list-element").click(function() {
      $("input", $(this)).prop("checked", true);
    });
    $(".template-choose-list-element").hover(
      function() {
        $("small", $(this)).stop().fadeIn(200);
      },
      function() {
        $("small", $(this)).stop().fadeOut(200);
      }
    );
  });
</script>