{%- extends 'base.html' %}
{%- from '_macros.html' import render_field, render_csrf, render_submit %}
{%- set title = 'Einstellungen' %}
{%- block content %}
<form action="{{ url_for('settings') }}" method="post" class="form-horizontal">
  <h2>Globale Einstellungen ändern</h2>
  {{ render_field(form.mail) }}
  {{ render_field(form.password) }}
  {{ render_field(form.password_confirm) }}
  {{ render_csrf(form) }}
  {{ render_submit(value='Speichern',name='submit_main') }}

  <h2>Dienste verwalten</h2>
  <p>
    Du kannst für jeden Dienst ein eigenes Passwort setzen:
  </p>

  {%- for service in services %}
  <div class="service">
    <h3>
      {% if service.changed %}
        {{ form.get_servicedelete(service.id) }}
      {% else %}
        {{ form.get_servicedelete(service.id)(disabled=True) }}
      {% endif %}
      {{ service.name }}
    </h3>

    <ul>
      {%- if service.changed %}
      <li class="active">aktiv</li>
      </li>
      {%- else %}
      <li class="inactive">inaktiv</li>
      {%- endif %}
    </ul>

    <div class="form-service">
      <p>Neues Passwort setzen:</p>
      {{ render_field(form.get_servicepassword(service.id)) }}
      {{ render_field(form.get_servicepasswordconfirm(service.id)) }}
      {{ render_submit(value='Speichern',name='submit_main') }}
    </div>
  </div>
  {%- endfor %}
  <div class="form-submit-services">
    <input type="submit" value="selektierte Passwörter löschen" name="submit_services" /> 
  </div>
</form>
{%- endblock %}


{% block javascript %}
  $(document).ready(function() {

    $('.service').each(function() {
      var header = $(this).find('h3');
      var list = $(this).find('ul');
      var content = $(this).find('.form-service');
      var elem = $('<a class="service-edit" href="">bearbeiten</a>')

      elem.click(function() {
        content.toggle();

        return false;
      });

      console.log(list.find('a'))
      if(list.find('a').length > 0) {
        list.find('a').parent().prepend(elem);
      } else {
        var li = $('<li></li>');
        li.append(elem);
        list.append(li);
      }
      
      content.hide();
    });

  });
{% endblock %}