{% extends "binder/base.html" %}

{% block box_name %}
  Create Brochure   <span id="page_count"></span>
{% endblock %}
{% block title %}
  Create Brochure
{% endblock %}
{% block extrajs %}
  <script type="text/javascript" src="{{ MEDIA_URL }}binder/js/create.js"></script>
  <script type="text/javascript" src="{{ pdf.get_info_file_url }}"></script>
{% endblock %}

{% block caption %}
<h1 id="caption">{{ pdf.caption }}</h1>
{% endblock %}

{% block box_content %}
  <ol class="instructions"><li>Click on "+" to expand each heading.</li>
  <li>Check the boxes next to the sections you'd like to include.</li>
  <li>Then click on the button to create your brochure.</li>
  </ol>
  <form method="POST">
    {% csrf_token %}
    {% for group in form.field_groups %}
      {% with group.name|slugify as id %}
        <fieldset>
          <div id="abstract_{{ id }}" class="hide">
            {{ group.field }}
          </div>
          <h1 id="{{ id }}" {% if group.hidden %}class="hidden"{% endif %}>
            <span class="title {% if group.hidden %}hidden{% else %}{% if group.mandatory %}mandatory{% else %}toggle{% endif %}{% if group.expanded %} expanded{% endif %}{% endif %}">
              <span class="bullet">
                {% if group.mandatory or group.expanded %}-{% else %}+{% endif %}
              </span>
              {{ group.name }}
            </span>
            <span class="select{% if not group.expanded %} hide{% endif %}"></span>
            <span class="counter"></span>
          </h1>
          <div class="{{ id }}{% if not group.expanded %} hide{% endif %}">
          {% for field in group.fields %}
            <div class="checkbox">
              {{ field }}
            </div>
            <div class="label">
              {{ field.label }}
            </div>
          {% endfor %}
          </div>
        </fieldset>
      {% endwith %}
    {% endfor %}
    {%if owner_logged_in%}
    <hr width=90%>
        <fieldset>
            <legend>Customise Your Brochure</legend>
            <ul class="instructions"><li>Any text entered here will appear inside the brochure, above the table of contents.</li>
            </ul>
            <table>
            <tr>
                <td>
                    <label for="name">Title   </label>
                </td>
                <td>
                    <input type="text" name="title" id="title" size="40">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="subtitle">Subtitle</label>
                </td>
                <td>
                    <input type="text" name="subtitle" id="subtitle" size="40">
                </td>
            </tr>
            <tr>
                <td style="padding-right:10px">
                    <label for="blurb">Additional Text</label>
                </td>
                <td>
                    <input type="text" name="blurb" id="blurb" size="40">
                </td>
            </tr>
            </table>
        </fieldset>
    {%endif%}
    
    <div class="submit">
      <input type="submit" value="Create Brochure"/>
      <span id="page_count_1"></span>
    </div>
  </form>
{% endblock %}



{% block footer %}<div id="footer">{{ pdf.footnote }}</div>{% endblock %}