{% extends "base.html" %}
{% load i18n fieldset_extras %}

{% get_fieldset "category,image" from form as fieldset_common %}

{% block extra_head %}
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/language_tabs.js"></script>
{% endblock %}

{% block maincontent %}
<form action="" method="post" enctype="multipart/form-data">
  {{ form.media }} {% csrf_token %}

  <fieldset>
    <div>
      <label for="id_category" class="field_name {{ form.category.css_classes }}">{{ form.category.label}}</label>
      {{ form.category }}
      {% if form.category.help_text %}<p class="help_text">{{form.category.help_text}}</p>{% endif %}
      {% if form.category.errors %}{{ form.category.errors }}{% endif %}
    </div>
    <div>
      <label for="id_image" class="field_name {{ form.image.css_classes }}">{{ form.image.label}}</label>
      {{ form.image }}
      {% if form.image.help_text %}<p class="help_text">{{form.image.help_text}}</p>{% endif %}
      {% if form.image.errors %}{{ form.image.errors }}{% endif %}
    </div>

  </fieldset>

  <ul class="tabs grid_12">
    <li><a href="#de">{% trans "German" %}</a></li>
    <li><a href="#en">{% trans "English" %}</a></li>
  </ul>
        <label for="id_{{ form.headline_de.html_name }}" class="fieldname {{ form.headline_de.css_classes }}">
          {{ form.headline_de.label }}</label>
        <p class="grid_10">{{ form.headline_de }}</p>

  <div class="tab_container">
    <div id="de" class="tab_content">
      <fieldset>
        <legend>Deutsch</legend>
        <label for="id_{{ form.headline_de.html_name }}" class="fieldname {{ form.headline_de.css_classes }}">
          {{ form.headline_de.label }}</label>
        <p class="grid_10">{{ form.headline_de }}</p>
      </fieldset>
      {{ form.content_de }}
    </div>
    <div id="en" class="tab_content">
      <h3 class="grid_12">English</h3>
      <label for="id_{{ form.headline_en.html_name }}" class="grid_2 {{ form.headline_en.css_classes }}">
        {{ form.headline_en.label }}</label>
      <p class="grid_10">{{ form.headline_en }}</p>
      <p>&nbsp;</p>
      {{ form.content_en }}
    </div>
  </div>
  <p class="buttonbar">
    <button type="reset"><span class="fa fa-undo"></span> {% trans 'reset' %}</button>
    <button type="submit"><span class="fa fa-hdd-o"></span> {% trans 'save' %}</button>
  </p>
</form>{% endblock %}

{% block buttonbar %}{% endblock %}