<div class="verification account row">
  <%track_event(category: "verification", action: "start_census" )%>
  <div class="small-12 column">

    <div class="text-center">
      <div class="small-4 column verification-step active">
        <span class="number">1</span> <%= t("verification.step_1") %>
      </div>
      <div class="small-4 column verification-step">
        <span class="number">2</span> <%= t("verification.step_2") %>
      </div>
      <div class="small-4 column verification-step">
        <span class="number">3</span> <%= t("verification.step_3") %>
      </div>
    </div>

    <div class="progress small-12 success">
      <span class="meter" style="width: 33%"></span>
    </div>

    <%= link_to account_path, class: "back" do %>
      <span class="icon-angle-left"></span>
      <%= t("verification.back") %>
    <% end %>

    <h1><%= t("verification.residence.new.title") %></h1>

    <div class="user-permissions small-12">
      <p><%= t("verification.user_permission_info") %></p>

      <ul>
        <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_debates") %></li>
        <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_proposal") %></li>
        <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_support_proposal") %></li>
        <li><span class="icon-x"></span>&nbsp;<%= t("verification.user_permission_votes") %></li>
      </ul>
    </div>

    <%= form_for @residence, as: "residence", url: residence_path do |f| %>
      <%= render "errors" %>

      <div class="row">
        <div class="small-12 medium-8">
          <div class="small-12 medium-3 column">
          <%= f.label t("verification.residence.new.document_type_label") %>
          <%= f.select :document_type, document_types, prompt: "", label: false %>
          </div>
          <div class="small-12 medium-5 column end">

          <div class="inline-block">
            <%= f.label t("verification.residence.new.document_number") %>
          </div>

          <div class="inline-block" data-toggle="info-document-number">
            <span class="icon-help"></span>
            <span class="sr-only"><%= t("verification.residence.new.document_number_help_title") %></span>
          </div>

          <div class="dropdown-pane" id="info-document-number" data-dropdown
               data-hover="true" data-hover-pane="true">
            <%= t("verification.residence.new.document_number_help_text_html") %>
          </div>

          <%= f.text_field :document_number, label: false %>
          </div>
        </div>
      </div>

      <div class="date-of-birth small-12 medium-6 clear">
      <%= f.label t("verification.residence.new.date_of_birth") %>
      <%= f.date_select :date_of_birth,
                        prompt: true,
                        start_year: 1900, end_year: 16.years.ago.year,
                        label: false %>
      </div>

      <div class="small-12 medium-5 clear">
        <%= f.label t("verification.residence.new.postal_code") %>
        <p class="note"><%= t("verification.residence.new.postal_code_note") %></p>
        <div class="medium-6">
          <%= f.text_field :postal_code, label: false %>
        </div>
      </div>

      <div class="small-12">
        <%= f.label :terms_of_service do %>
          <%= f.check_box :terms_of_service, title: t('verification.residence.new.accept_terms_text_title'), label: false %>
          <span class="checkbox">
            <%= t("verification.residence.new.accept_terms_text",
                terms_url: link_to(t("verification.residence.new.terms"), "/census_terms",
                title: t('shared.target_blank_html'),
                target: "_blank")).html_safe
            %>
          </span>
        <% end %>
      </div>

      <div class="small-12 medium-3 clear">
        <%= f.submit t("verification.residence.new.verify_residence"), class: "button success expanded" %>
      </div>
    <% end %>
  </div>
</div>
