{% extends 'pirati_cz.html' %}

{%block head%}
<style>
.userform ul {margin: 0.2em;}
.userform li { list-style: none; }
.userform input[type="checkbox"] { vertical-align: text-top; margin: 0px 0.5em 0 0 ;}
.large_choice_list > li {display: inline-block; float: left; width: 30em;}
.large_choice_list > li > label {  }
.large_choice_list > li > label > input {float: left;}
</style>
{%endblock %}
{%block body%}
<div class="row">
  <div class="medium-12 large-12 columns">
    <section class="o-section o-section--spaceBot">
      <div class="o-section-inner">
        <div class="o-section-block" data-equalizer data-equalize-on="medium">
          <h2>Dotazník zájmů a&nbsp;dovedností{% if not request.user.is_anonymous %} uživatele {{request.user}} {% endif %}</h2>
          Pokud se chcete k&nbsp;Pirátům lépe zapojit, můžete nám pomoci tím, že vyplníte vaše dovednosti,
          kterými jste ochotni pomoci. Následně vás bude moci koordinátor oslovit s&nbsp;případnou
          žádostí o&nbsp;pomoc.
          <br/>
          <br/>
          
          <form method="post" action="#" class="userform">
              {%csrf_token%}
              <div class="medium-12 large-12 columns">
              <b>Chci Pirátům pomoci s:</b><br/>{{form.skills.errors}}<br/>
              <ul id="id_skills" class="large_choice_list">
              {% with form.skills.value as selection  %}
              {% for val, txt in form.skills.field.choices %}
                  <li><label for="id_skills_{{val}}"><input name="skills" value="{{val}}" id="id_skills_{{val}}" type="checkbox" {% if val in selection %} checked=""{% endif %}>
                      <div style="margin-left: 2em;">{{txt}}</div></label>
                  </li>
              {%endfor%}
              {%endwith%}
              </ul>
              <br/>
              <div style="clear: both; padding-top: 1em;">Poznámka: {{form.skills_note}}</div>
              </div>
              <div class="medium-12 large-12 columns">&nbsp;</div>
              <div class="medium-12 large-12 columns">
              <b>V&nbsp;politice mě zajímají následující témata:</b><br/>{{form.topics.errors}}<br/>
              <ul id="id_topics" class="large_choice_list">
              {% with form.topics.value as selection  %}
              {% for val, txt in form.topics.field.choices %}
                  <li><label for="id_topics_{{val}}"><input name="topics" value="{{val}}" id="id_topics_{{val}}" type="checkbox" {% if val in selection %} checked=""{% endif %}>
                      <div style="margin-left: 2em;">{{txt}}</div></label>
                  </li>
              {%endfor%}
              {%endwith%}
              </ul>
              </div>
              <div class="medium-12 large-12 columns">&nbsp;</div>
              <div class="medium-12 large-12 columns">
              <b>Chci dostávat novinky z těchto regionů:</b><br/>{{form.regions.errors}}<br/>
              <ul id="id_regions" class="large_choice_list">
              {% with form.regions.value as selection  %}
              {% for val, txt in form.regions.field.choices %}
                  <li><label for="id_regions_{{val}}"><input name="regions" value="{{val}}" id="id_regions_{{val}}" type="checkbox" {% if val in selection %} checked=""{% endif %}>
                      <div style="margin-left: 2em;">{{txt}}</div></label>
                  </li>
              {%endfor%}
              {%endwith%}
              </ul>
              </div>
              <div class="medium-12 large-12 columns">&nbsp;</div>
              <div class="medium-12 large-12 columns">
                  <input type="submit" class="button button-primary" value="Uložit provedené změny"/>
              </div>
          </form>
          <br/>

        </div>
      </div>
    </section>
  </div>
</div>

{%endblock%}