opengovernment/askthem

<article id="recipient-step" <%= step_class_for(step, relevant_steps) -%>>
  <header>
    <h1 class="action">Who should answer this question?</h1>
    <% if bill -%>
      <span class="ref"><span class="emph">re:</span> <span class="bill-title"><%= short_bill_title(bill) -%></span></span>
    <% end -%>
  </header>

  <span class="toggle">
    <span>Locate by:</span>
    <br>
    <br>
    <a href="#address_lookup" class="select active address_lookup mobile">Your Address</a>
    <a class="select active address_lookup">
      <i class="icon-home"></i> Your Address
    </a>
    <a name="address_lookup" class="anchor"></a>

    <a href="#name-lookup" class="select mobile name-lookup">Their Name</a>
    <a class="select name-lookup">
      <i class="icon-user"></i> Their Name
    </a>
    <a name="name-lookup" class="anchor"></a>

    <a href="#twitter_find" class="select twitter twitter_lookup mobile">Their Twitter Name</a>
    <a class="select twitter">
      <i class="icon-twitter"></i> Their Twitter Name
    </a>
    <a name="twitter_find" class="anchor"></a>
  </span>

  <div class="data_collection_form">
    <div class="address_lookup">
      <span class="secure">
        <i class="icon-lock"></i> Enter your address to see your elected officials.
      </span>
      <%- unless user_signed_in? %>
        <a href="/users/sign_in" class="login-link">Already have an AskThem account? Login.</a>
      <%- end %>

      <fieldset class="last">
        <%= f.fields_for :user do |user_form| %>
          <%= user_form.hidden_field :for_new_question %>

          <div class="pill_wrap">
            <label for="question_user_attributes_street_address" class="lesser">Address</label>
            <%= user_form.text_field :street_address, placeholder: 'Street Address', validate: true %>
          </div>
          <div class="pill_wrap">
            <label for="question_user_attributes_locality" class="lesser">City</label>
            <%= user_form.text_field :locality, placeholder: 'City', validate: true %>
          </div>
          <div class="pill_wrap">
            <label for="question_user_attributes_region" class="lesser">State</label>
            <div class="input select sculpt icon-angle-down">
              <%= user_form.select :region, options_for_select(OpenGovernment::STATES, @state_code.split('-').first), placeholder: 'Select your state' %>
            </div>
          </div>
          <div class="pill_wrap">
            <label for="question_user_attributes_postal_code" class="lesser">Zipcode</label>
            <%= user_form.text_field :postal_code, placeholder: 'ex. 02141', autocomplete: 'off' %>
          </div>
        <% end %>
      </fieldset>

      <label for="question_person_id" class="select-person" style="display:none;">Recipient
        <span class="details">Next, select who you'd like to receive the question:</span>
      </label>

      <div class="loading" style="display:none;">Loading<span class="loading-1">.</span><span class="loading-2">.</span><span class="loading-3">.</span></div>
      <div class="nothing-matching" style="display:none;">We're having trouble matching that address. Generally, residential addresses work best. Perhaps a typo?</div>

      <fieldset class="person-selector">
        <ol class="people-list select-person">
          <!-- will be populated by address_lookup -->
        </ol>
      </fieldset>
    </div>

    <div class="twitter" style="display:none;">
      <label for="question">
        <span class="details">Ask a question to a verified Twitter account. (Please be patient, may take a few seconds. Case-sensitive works better.)</span>
      </label>

      <fieldset>
        <div class="inline_label to">
          <input type="text" name="twitter" id="twitter" placeholder="Enter a twitter account" autocomplete="off" />
        </div>

        <div class="loading">Loading<span class="loading-1">.</span><span class="loading-2">.</span><span class="loading-3">.</span></div>
        <div class="nothing-matching" style="display:none;">No matching verified Twitter accounts yet...</div>

        <ol class="people-list select-person twitter">
        </ol>
      </fieldset>
    </div>

    <div class="name-lookup" style="display:none;">
      <label for="question">
        <span class="details">Search by elected official's name in <%= jurisdiction.name -%></span>
      </label>
      <fieldset>
        <div class="inline_label to">
          <input type="text" name="name-lookup" id="name-lookup" placeholder="An elected official's name" autocomplete="off" />
        </div>

        <div class="loading">Loading<span class="loading-1">.</span><span class="loading-2">.</span><span class="loading-3">.</span></div>
        <div class="nothing-matching" style="display:none;">Nobody that spells their name that way yet... Maybe try the person's more formal name.</div>

        <ol class="people-list select-person name-lookup">
          <!-- will be populated by address_lookup -->
        </ol>
      </fieldset>
    </div>
  </div>
</article>