{% extends "base.html" %}
{% load semanticui %}
{% block content %}

  <form class= "ui form" method="post" action="{% block formtag %}{% endblock formtag %}">
  {% csrf_token %}
  {{ form.non_field_errors }}
  {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
  <div class="two fields">
    <div class="required field{% if form.name.errors %} error{% endif %}">
      <label for="{{ form.name.id_for_label }}">{{ form.name.label|safe }}</label>
      {{ form.name }}
      {% if form.name.errors %}
        <div class="ui inverted red message">
          {{ form.name.errors }}
        </div>
      {% endif %}
    </div>
    <div class="required field{% if form.slug.errors %} error{% endif %}">
      <label for="{{ form.slug.id_for_label }}">{{ form.slug.label|safe }}</label>
      {{ form.slug }}
      {% if form.slug.errors %}
        <div class="ui inverted red message">
          {{ form.slug.errors }}
        </div>
      {% endif %}
    </div>
  </div>
  {{ hostformset.management_form }}
  {% for hostform in hostformset %}
    {{ hostform.non_field_errors }}
    {% for field in hostform.hidden_fields %}{{ field }}{% endfor %}
    <div class="four fields">
      <div class="required field{% if hostform.address.errors %} error{% endif %}">
        <label for="{{ hostform.address.id_for_label }}">{{ hostform.address.label|safe }}</label>
        {{ hostform.address }}
        {% if hostform.address.errors %}
          <div class="ui inverted red message">
            {{ hostform.address.errors }}
          </div>
        {% endif %}
      </div>
      <div class="required field{% if hostform.port.errors %} error{% endif %}">
        <label for="{{ hostform.port.id_for_label }}">{{ hostform.port.label|safe }}</label>
        {{ hostform.port }}
        {% if hostform.port.errors %}
          <div class="ui inverted red message">
            {{ hostform.port.errors }}
          </div>
        {% endif %}
      </div>
      <div class="field{% if hostform.ssl.errors %} error{% endif %}">
        <div class="ui inverted toggle checkbox">
          {{ hostform.ssl }}
          <label for="{{ hostform.ssl.id_for_label }}">{{ hostform.ssl.label|safe }}</label>
          {% if hostform.port.errors %}
            <div class="ui inverted red message">
              {{ hostform.port.errors }}
            </div>
          {% endif %}
        </div>
      </div>
      <div class="field">
        <div class="ui inverted checkbox">
          {{ hostform.DELETE }}
          {% if hostform.instance.pk %}
            <label for="{{ hostform.DELETE.id_for_label }}">{{ hostform.DELETE.label }}</label>
          {% else %}
            <label for="{{ hostform.DELETE.id_for_label }}">Clear</label>
          {% endif %}
          {% if hostform.DELETE.errors %}
            <div class="ui inverted red message">
              {{ hostform.DELETE.errors }}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  {% endfor %}
  <div class="four fields">
    <div class="required field{% if form.nickname.errors %} error{% endif %}">
      <label for="{{ form.nickname.id_for_label }}">{{ form.nickname.label|safe }}</label>
      {{ form.nickname }}
      {% if form.nickname.errors %}
        <div class="ui inverted red message">
          {{ form.nickname.errors }}
        </div>
      {% endif %}
    </div>
    <div class="field{% if form.password.errors %} error{% endif %}">
      <label for="{{ form.password.id_for_label }}">{{ form.password.label|safe }}</label>
      {{ form.password }}
      {% if form.password.errors %}
        <div class="ui inverted red message">
          {{ form.password.errors }}
        </div>
      {% endif %}
    </div>
    <div class="field{% if form.mail.errors %} error{% endif %}">
      <label for="{{ form.mail.id_for_label }}">{{ form.mail.label|safe }}</label>
      {{ form.mail }}
      {% if form.mail.errors %}
        <div class="ui inverted red message">
          {{ form.mail.errors }}
        </div>
      {% endif %}
    </div>
    <div class="required field{% if form.username.errors %} error{% endif %}">
      <label for="{{ form.username.id_for_label }}">{{ form.username.label|safe }}</label>
      {{ form.username }}
      {% if form.username.errors %}
        <div class="ui inverted red message">
          {{ form.username.errors }}
        </div>
      {% endif %}
    </div>
  </div>
  <div class="three fields">
    <div class="required field{% if form.home_channel.errors %} error{% endif %}">
      <label for="{{ form.home_channel.id_for_label }}">{{ form.home_channel.label|safe }}</label>
      {{ form.home_channel }}
      {% if form.home_channel.errors %}
        <div class="ui inverted red message">
          {{ form.home_channel.errors }}
        </div>
      {% endif %}
    </div>
    <div class="required field{% if form.command_character.errors %} error{% endif %}">
      <label for="{{ form.command_character.id_for_label }}">{{ form.command_character.label|safe }}</label>
      {{ form.command_character }}
      {% if form.command_character.errors %}
        <div class="ui inverted red message">
          {{ form.command_character.errors }}
        </div>
      {% endif %}
    </div>
    <div class="required field{% if form.help_character.errors %} error{% endif %}">
      <label for="{{ form.help_character.id_for_label }}">{{ form.help_character.label|safe }}</label>
      {{ form.help_character }}
      {% if form.help_character.errors %}
        <div class="ui inverted red message">
          {{ form.help_character.errors }}
        </div>
      {% endif %}
    </div>
  </div>
  <div class="ui inverted toggle checkbox{% if form.enabled.errors %} error{% endif %}">
    {{ form.enabled }}
    <label for="{{ form.enabled.id_for_label }}">{{ form.enabled.label|safe }}</label>
    {% if form.enabled.errors %}
      <div class="ui inverted red message">
        {{ form.enabled.errors }}
      </div>
    {% endif %}
  </div>

  {{ ownerformset.management_form }}
  {% for ownerform in ownerformset %}
    {% render_form ownerform %}
  {% endfor %}

  <button class="ui right floated inverted positive button" type="submit" value="Submit"><i class="save icon"></i>Save</button>
  </form>

{% endblock %}

<div class="ui required field{% if form.enabled.errors %} error{% endif %}">
  <label for="{{ form.enabled.id_for_label }}">{{ form.network_services.label|safe }}</label>
  <div class="ui selection dropdown">
    {{ form.network_services }}
    <script type="text/javascript">
      $('.ui.dropdown')
        .dropdown()
      ;
    </script>
    {% if form.network_services.errors %}
      <div class="ui inverted red message">
        {{ form.network_services.errors }}
      </div>
    {% endif %}
  </div>
</div>
<div class="ui inverted toggle checkbox{% if form.mute.errors %} error{% endif %}">
  {{ form.mute }}
  <label for="{{ form.enabled.id_for_label }}">{{ form.enabled.label|safe }}</label>
  {% if form.mute.errors %}
    <div class="ui inverted red message">
      {{ form.mute.errors }}
    </div>
  {% endif %}
</div>

  <div class="ui selection dropdown">
    <input name="gender" type="hidden">
    <i class="dropdown icon"></i>
    <div class="default text">Gender</div>
    <div class="menu">
      <div class="item" data-value="1">Male</div>
      <div class="item" data-value="0">Female</div>
    </div>
  </div>
  <script type="text/javascript">
    $('.ui.dropdown')
      .dropdown()
    ;
  </script>





  <form
    {% csrf_token %}
    {{ form.non_field_errors }}
    <div class="two fields">
      {% render_field form.name %}
      {% render_field form.slug %}
    </div>
    {{ hostformset.management_form }}
    {% for hostform in hostformset %}
    {{ hostform.non_field_errors }}
      <div class="four fields">
        {% render_field hostform.address %}
        {% render_field hostform.port %}
        {% render_field hostform.ssl %}
        {% render_field hostform.DELETE %}
      </div>
    {% endfor %}
    <div class="four fields">
      {% render_field form.nickname %}
      {% render_field form.password %}
      {% render_field form.mail %}
      {% render_field form.username %}
    </div>
    <div class="three fields">
      {% render_field form.home_channel %}
      {% render_field form.command_character %}
      {% render_field form.help_character %}
    </div>
      {% render_field form.enabled %}
    <button class="ui right floated inverted positive button" type="submit" value="Submit"><i class="save icon"></i>Save</button>
    {% block buttons %}{% endblock buttons %}
  </form>
