= render 'shared/terms_and_conditions'
.row
  .col-md-1.col-xs-4
    = image_tag('ch420_logo.png', class:'img-responsive pagelogo')
  .col-md-8.col-xs-8
    h1
      = title t('.title_html')
  .col-xs-12.col-md-3
    = render 'shared/counter'
.row
  .col-xs-12.col-md-7
    = simple_form_for @supporter do |f|
      = f.input :first_name, placeholder: t('.placeholders.first_name')
      = f.input :last_name, placeholder: t('.placeholders.last_name')
      = f.input :street, placeholder: t('.placeholders.street')
      = f.input :city, placeholder: t('.placeholders.city')
      = f.input :zip, placeholder: t('.placeholders.zip')
      = f.input :email, placeholder: t('.placeholders.email')
      = f.input :support, as: :radio_buttons, collection: t('support_type').map{ |x| [x.first, raw(x.last)]}, label_method: :last, value_method: :first
      = f.input :li_membership, as: :boolean
      = f.input :age_category, as: :radio_buttons, collection: t('age_category'), label_method: :last, value_method: :first
      = f.input :comments, as: :text
      .form-group
        = f.submit value: t('.submit'), class: 'btn btn-success'
      .form-group
        = link_to t('.terms_and_conditions'),'#', data: { toggle: :modal, target: '#terms_and_conditions'}, class: 'small'

    javascript:
      var cities = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
          url: '/cities_autocomplete.json?query=%QUERY',
          wildcard: '%QUERY',
        }
      });
      
      var suggestion_template = function (data) {
          return '<p>' + data.plz + ' - ' + data.city + '</p>';
      }
      
      $('#supporter_city').typeahead({
        minLength: 2,
      },{
      limit: 20,
      display: 'city',
      templates: {
        suggestion: function (data) {
            return suggestion_template(data);
        }
      },
        source: cities 
      }).on('typeahead:selected', function(event, datum) {
        $("#supporter_zip").val(datum.plz);
      });
        
      $('#supporter_zip').typeahead({
        minLength: 2,
      },{
        limit: 20,
        display: 'plz',
        templates: {
          suggestion: function (data) {
              return suggestion_template(data);
          }
        },
        source: cities 
      }).on('typeahead:selected', function(event, datum) {
        $("#supporter_city").val(datum.city);
      });  
  .col-md-5.col-xs-12
    .well
      /p.embed-responsive.embed-responsive-4by3
        iframe.embed-responsive-item src="https://www.youtube.com/embed/NpS4ebEtLUE" frameborder="0" allowfullscreen=""
      p = image_tag 'li_logo.svg', class: 'img-responsive'
      p Wir wollen die nötigen Unterschriften für eine Volksinitiative zur Cannabis-Legalisierung sammeln. Für die Umsetzung setzt man auf ein neues Sammelkonzept. Dies funktioniert in drei Schritten:
      
      p
        strong Schritt 1:  
        | Durch dieses Onlineformular sammeln wir Sympathisanten und potentielle Aktivisten.
      p
        strong Schritt 2:  
        | Sobald die geforderte Anzahl Personen gesammelt sind, schauen wir, wie viele Ressourcen an Helfer/innen an welchen Orten benötigt werden.
      p
        strong Schritt 3:  
        | Durch eine ausgeklügelte Logistik werden Sympathisanten und Aktivisten zusammengebracht, um gemeinsam die nötigen Unterschriften zu generieren.
      
      p.lead Wenn du also <span class="text-success">Cannabis in der Schweiz legalisieren</span> willst, fülle das nebenstehende Formular aus und schreibe mit uns Geschichte.
      
      p Mehr Informationen findest du unter #{link_to 'https://www.hanflegal.ch/initiative', 'https://www.hanflegal.ch/initiative'}
      
      strong Wer steht hinter dieser Aktion?
      p Die Aktion wurde von Mitgliedern des Verein Legalize it! initiiert. Seit 25 Jahren helfen wir vom Verein Legalize it! Menschen, die mit THC-Produkten Umgang pflegen, bei den unterschiedlichsten Fragen.
      strong Kontakt
      p
        | Nino Forrer (#{mail_to 'nino@hanflegal.ch'}) 
        em Strategie / Presse
        br
        | Markus Graf (#{mail_to 'markus@hanflegal.ch'}) 
        em Inhalt / Technik