VulpesOS/gaia/apps/email/js/cards/setup_manual_config.html

<!-- need this section element to keep building blocks happy. Too bad it
  expects a section element -->
<section class="skin-organic form-card bbshim" role="region">
  <header class="sup-account-header">
    <a data-event="click:onBack" href="#" class="sup-back-btn" role="button"
       data-l10n-id="back-button">
      <span class="icon icon-back"></span>
    </a>
    <h1 class="sup-account-header-label header-label"
        data-l10n-id="setup-manual-config-header"></h1>
  </header>
  <div data-prop="scrollBelowNode" class="scrollregion-below-header">
    <div data-prop="errorRegionNode" class="sup-error-region collapsed">
      <div data-prop="errorMessageNode" class="sup-error-message"></div>
    </div>
    <header class="collapsed"></header>
    <form data-prop="formNode" class="sup-manual-form">
      <div class="sup-manual-common sup-form">
        <p>
          <!-- x-inputmode is a temporary v1 B2G stop-gap -->
          <input class="sup-info-name" type="text"
                 data-l10n-id="setup-info-name"
                 x-inputmode="verbatim"
                 inputmode="verbatim"
                 dir="auto"
                 required />
          <button type="reset"></button>
        </p>
        <p>
          <input class="sup-info-email" type="email"
                 data-l10n-id="setup-info-email"
                 dir="auto"
                 required />
          <button type="reset"></button>
        </p>
        <p class="sup-manual-password-wrapper">
          <input class="sup-info-password" type="password"
                 data-l10n-id="setup-info-password"
                 dir="auto"
                 required />
          <button type="reset"></button>
        </p>
      </div>

      <header>
        <h2 data-l10n-id="setup-manual-account-type"></h2>
      </header>
      <div class="sup-form sup-form-item">
        <!-- These don't need L10N as they are protocol names. -->
        <li class="sup-manual-account-type-container">
          <span class="button icon icon-dialog">
            <select data-prop="accountTypeNode"
                    data-event="change:onChangeAccountType"
                    data-l10n-id="setup-manual-account-type-select"
                    class="mail-select sup-manual-account-type">
              <option value="imap+smtp">IMAP+SMTP</option>
              <option value="pop3+smtp">POP3+SMTP</option>
              <option value="activesync">ActiveSync</option>
            </select>
          </span>
        </li>
      </div>

      <section data-prop="compositeSection"
               class="sup-manual-composite" role="region">
        <header class="collapsed"></header>
        <header>
          <h2 data-prop="manualImapTitle"  class="sup-manual-imap-title"
              data-l10n-id="setup-manual-imap-header"></h2>
          <h2 data-prop="manualPop3Title" class="sup-manual-pop3-title"
              data-l10n-id="setup-manual-pop3-header"></h2>
        </header>
        <div class="sup-form">
          <p>
            <input class="sup-manual-composite-hostname" type="text"
                   data-l10n-id="setup-manual-hostname"
                   x-inputmode="verbatim"
                   inputmode="verbatim"
                   dir="auto"
                   data-maybe-required />
            <button type="reset"></button>
          </p>
          <p>
            <input class="sup-manual-composite-username" type="text"
                   data-l10n-id="setup-manual-username"
                   x-inputmode="verbatim"
                   inputmode="verbatim"
                   dir="auto"
                   data-maybe-required />
            <button type="reset"></button>
          </p>
          <p>
            <input class="sup-manual-composite-password" type="password"
                   data-l10n-id="setup-info-password"
                   dir="auto"
                   data-maybe-required />
            <button type="reset"></button>
          </p>
          <li class="sup-socket-select-container">
            <span class="button icon icon-dialog">
              <select class="mail-select sup-manual-composite-socket sup-socket-select"
                      data-l10n-id="setup-manual-socket-select">
                <option value="SSL" data-l10n-id="setup-manual-socket-ssl">
                  SsL</option>
                <option value="STARTTLS" data-l10n-id="setup-manual-socket-starttls">
                  StarttlS</option>
                <option value="PLAIN" data-l10n-id="setup-manual-socket-plain">
                  PlaiN</option>
              </select>
            </span>
          </li>
          <p>
            <input class="sup-manual-composite-port" type="text"
                   data-l10n-id="setup-manual-port" value="993"
                   dir="auto"
                   data-maybe-required />
            <button type="reset"></button>
          </p>
        </div>

        <header>
          <h2 data-l10n-id="setup-manual-smtp-header"></h2>
        </header>
        <div class="sup-form">
          <p>
            <input class="sup-manual-smtp-hostname" type="text"
                   data-l10n-id="setup-manual-hostname"
                   x-inputmode="verbatim"
                   inputmode="verbatim"
                   dir="auto"
                   data-maybe-required />
            <button type="reset"></button>
          </p>
          <p>
            <input class="sup-manual-smtp-username" type="text"
                   data-l10n-id="setup-manual-username"
                   x-inputmode="verbatim"
                   inputmode="verbatim"
                   dir="auto"
                   data-maybe-required />
            <button type="reset"></button>
          </p>
          <p>
            <input class="sup-manual-smtp-password" type="password"
                   data-l10n-id="setup-info-password"
                   dir="auto"
                   data-maybe-required />
            <button type="reset"></button>
          </p>
          <li class="sup-socket-select-container">
            <span class="button icon icon-dialog">
              <select class="mail-select sup-manual-smtp-socket sup-socket-select"
                      data-l10n-id="setup-manual-socket-select">
                <option value="SSL" data-l10n-id="setup-manual-socket-ssl">
                  SsL</option>
                <option value="STARTTLS" data-l10n-id="setup-manual-socket-starttls">
                  StarttlS</option>
                <option value="PLAIN" data-l10n-id="setup-manual-socket-plain">
                  PlaiN</option>
              </select>
            </span>
          </li>
          <p>
            <input class="sup-manual-smtp-port" type="text"
                   data-l10n-id="setup-manual-port" value="465"
                   dir="auto"
                   data-maybe-required />
            <button type="reset"></button>
          </p>
        </div>
      </section>

      <section data-prop="activeSyncSection"
               class="sup-manual-activesync collapsed" role="region">
        <header class="collapsed"></header>
        <header>
          <h2 data-l10n-id="setup-manual-activesync-header">
            ActivesynC SettingS</h2>
        </header>
        <div class="sup-form">
          <p>
            <input class="sup-manual-activesync-hostname" type="text"
                   data-l10n-id="setup-manual-hostname"
                   x-inputmode="verbatim"
                   inputmode="verbatim"
                   dir="auto"
                   data-maybe-required />
            <button type="reset"></button>
          </p>
          <p>
            <input class="sup-manual-activesync-username" type="text"
                   data-l10n-id="setup-manual-activesync-username"
                   dir="auto"
                   data-maybe-required />
            <button type="reset"></button>
          </p>
        </div>
      </section>
      <div class="sup-form">
        <p>
          <button data-prop="nextButton"
                  data-event="click:onNext"
                  class="sup-manual-next-btn recommend" disabled>
            <span data-l10n-id="setup-info-next"></span>
          </button>
        </p>
      </div>
    </form>
  </div>
</section>