VulpesOS/assets/webapps/communications.gaiamobile.org/contacts/elements/form.html

<element name="view-contact-form" extends="section">
  <template>
    <gaia-header id="contact-form-header" action="close">
      <h1 id='contact-form-title' data-l10n-id="addContact"></h1>
      <button id="save-button" data-l10n-id="done">Done</button>
    </gaia-header>
    <progress id="throbber" value="0" max="100" class="pack-activity hide"></progress>

    <div id='add-phone-#i#' role="listitem" data-template class='phone-template field-template' data-index="#i#">
      <fieldset class="fillflow-row">
        <div class="two_fields first-row">
          <legend class="action" role="combobox" aria-haspopup="true" aria-labelledby="tel_type_#i#">
            <span aria-hidden="true" data-taglist="phone-type" name="tel" data-value="#type_value#"
              id="tel_type_#i#" data-field="type" data-l10n-id="#type_l10n_id#">
              #type#
            </span>
          </legend>
          <p class="setbox-item">
            <input placeholder="Carrier" data-field="carrier" data-l10n-id="carrier" name="tel[#i#][carrier]" class="textfield" type="text" x-inputmode="latin-prose" value="#carrier#" id="carrier_#i#" dir="auto">
            <button type="reset">Clear</button>
          </p>
        </div>
        <section class="second-row">
          <p class="setbox-item">
            <bdi>
              <input placeholder="Phone" data-field="value" data-l10n-id="tel" name="tel[#i#][value]" class="textfield" type="tel" value="#value#" id="number_#i#">
              <button type="reset">Clear</button>
            </bdi>
          </p>
        </section>
      </fieldset>
    </div>

    <div id='add-email-#i#' role="listitem" data-template class='email-template field-template' data-index="#i#">
      <fieldset class="fillflow-row">
        <legend class="action first-row" role="combobox" aria-haspopup="true" aria-labelledby="email_type_#i#">
          <span aria-hidden="true" data-taglist="email-type" name="email[#i#][type]" data-value="#type_value#" id="email_type_#i#" data-field="type" data-l10n-id="#type_l10n_id#">#type#</span>
        </legend>
        <section>
          <p class="setbox-item second-row">
            <input placeholder="Email" data-field="value" data-l10n-id="email" name="email[#i#][value]" class="textfield" type="email" value="#value#" id="email_#i#">
            <button type="reset">Clear</button>
          </p>
        </section>
      </fieldset>
    </div>

    <div id='add-address-#i#' role="listitem" data-template class='address-template field-template' data-index="#i#">
      <fieldset class="fillflow-row">
        <section>
          <p class="setbox-item first-row">
            <input placeholder="Street" data-field="streetAddress" data-l10n-id="streetAddress" name="adr[#i#][streetAddress]" class="textfield" type="text" x-inputmode="latin-prose" value="#streetAddress#" id="streetAddress_#i#" dir="auto">
            <button type="reset">Clear</button>
          </p>
          <div class="two_fields second-row">
            <legend class="action" role="combobox" aria-haspopup="true" aria-labelledby="address_type_#i#">
              <span aria-hidden="true" data-taglist="address-type" name="adr[#i#][type]" data-value="#type_value#" id="address_type_#i#" data-field="type" data-l10n-id="#type_l10n_id#">#type#</span>
            </legend>
            <p class="setbox-item">
              <input placeholder="City" data-field="locality" data-l10n-id="locality" name="adr[#i#][locality]" class="textfield" type="text" x-inputmode="latin-prose" value="#locality#" id="locality_#i#" dir="auto">
              <button type="reset">Clear</button>
            </p>
          </div>
          <div class="two_fields third-row">
            <p class="setbox-item">
              <input placeholder="Country" data-field="countryName" data-l10n-id="countryName" name="adr[#i#][countryName]" class="textfield" type="text" x-inputmode="latin-prose" value="#countryName#" id="countryName_#i#" dir="auto">
              <button type="reset">Clear</button>
            </p>
            <p class="setbox-item">
              <input placeholder="Zip Code" data-field="postalCode" data-l10n-id="postalCode" name="adr[#i#][postalCode]" class="textfield" type="text" x-inputmode="verbatim" value="#postalCode#" id="postalCode_#i#" dir="auto">
              <button type="reset">Clear</button>
            </p>
          </div>
        </section>
      </fieldset>
    </div>

    <div id='add-date-#i#' role="listitem" data-template class='date-template field-template' data-exclusive="true" data-custom="false" data-index="#i#">
      <fieldset class="fillflow-row first-row">
        <div class="two_fields">
          <legend class="action" role="combobox" aria-haspopup="true" aria-labelledby="date_type_#i#">
            <span aria-hidden="true" data-taglist="date-type" name="date[#i#][type]" data-value="#type_value#" id="date_type_#i#" data-field="type" data-l10n-id="#type_l10n_id#">#type#</span>
          </legend>
          <section>
            <p class="setbox-item">
              <span aria-hidden="true" id="date-text_#i#" class="datetime placeholder">
                Date
              </span>
              <input placeholder="date" data-field="#type#"  data-l10n-id="date" name="date[#i#][value]" type="date" id="date_#i#" aria-labelledby="date-text_#i#">
            </p>
          </section>
        </div>
      </fieldset>
    </div>

    <div id='add-note-#i#' role="listitem" data-template class='note-template field-template' data-index="#i#">
      <dl role="presentation" class="setbox fillflow-row first-row">
        <dd class="setbox-body">
          <p class="setbox-item">
            <textarea placeholder="Comment" data-field="note"
              data-l10n-id="comment" name="comment[#i#]" class="textfield"
              type="text" x-inputmode="latin-prose" id="note_#i#">
                #note#
            </textarea>
           <button type="reset">Clear</button>
          </p>
        </dd>
      </dl>
    </div>


    <article class="view-body">
      <div class="view-body-inner">
        <form id="contact-form" action="#" class="fill-flow">
          <input name="id" id="contact-form-id" type="hidden" value="">
          <section class="item first">
            <div id="thumbnail-action" href="#" class="item-media fillflow-media">
              <div role="button" id="photo-button" class="bb-button">
                <p>
                  <span class="icon icon-addimage"></span>
                  <em data-l10n-id="addPhoto">Add photo</em>
                </p>
                <p class="edit-photo">
                  <em data-l10n-id="edit-picture">Edit Picture</em>
                </p>
                <img id="thumbnail-photo" alt="">
              </div>
            </div>
            <div class="item-body-exp with-overflow">
              <p class="fillflow-row input-container">
                <input placeholder="Name" data-field="givenName" data-l10n-id="givenName" name="givenName" class="textfield" type="text" x-inputmode="latin-prose" value="" id="givenName" dir="auto" autocorrect="off" autocapitalize="on" spellcheck="false" x-inputmode="verbatim">
                <button type="reset">Clear</button>
              </p>
              <p class="fillflow-row input-container">
                <input placeholder="Last name" data-field="familyName" data-l10n-id="familyName" name="familyName" class="textfield" type="text" x-inputmode="latin-prose" value="" id="familyName" dir="auto" autocorrect="off" autocapitalize="on" spellcheck="false" x-inputmode="verbatim">
                <button type="reset">Clear</button>
              </p>
            </div>
            <div class="with-overflow">
              <p class="fillflow-row">
                <input placeholder="Company Name" data-field="org" data-l10n-id="org" name="org" class="textfield" type="text" x-inputmode="verbatim" value="" id="org" dir="auto">
                <button type="reset" id="clear-org">Clear</button>
              </p>
            </div>
          </section>

          <ul role="presentation">
            <li role="region" aria-label="Phones" data-l10n-id="phones">
              <section>
                <div id="contacts-form-phones" role="list"></div>
              </section>
              <button data-field-type="tel" id='add-new-phone' data-l10n-id="addPhone" class="fillflow-row action action-add icon icon-add">
                Add phone number
              </button>
              <hr>
            </li>

            <li role="region" aria-label="Emails" data-l10n-id="emails">
              <section>
                <div id="contacts-form-emails" role="list"></div>
              </section>

              <button data-field-type="email" id='add-new-email' data-l10n-id="addEmail" class="fillflow-row action action-add icon icon-add">
                Add email address
              </button>
              <hr>
            </li>

            <li role="region" aria-label="Addresses" data-l10n-id="addresses">
              <section>
                <div id="contacts-form-addresses" role="list"></div>
              </section>

              <button data-field-type="adr" id='add-new-address' data-l10n-id="addAddress" class="fillflow-row action action-add icon icon-add">
                Add new address
              </button>
              <hr>
            </li>

            <li role="region" aria-label="Dates" data-l10n-id="dates">
              <section>
                <div id="contacts-form-dates" role="list"></div>
              </section>

              <button data-field-type="date" id='add-new-date' data-l10n-id="addDate" class="fillflow-row action action-add icon icon-add">
                Add Date
              </button>
              <hr>
            </li>

            <li role="region" aria-label="Notes" data-l10n-id="notes">
              <section>
                <div id="contacts-form-notes" role="list"></div>
              </section>

              <button data-field-type="note" id='add-new-note' data-l10n-id="addComment" class="fillflow-row action action-add icon icon-add">
                Add comment
              </button>
              <hr>
            </li>
          </ul>
        </form>

        <footer class="tail-actions hide">
          <button id='delete-contact' class="fillflow-row action action-delete danger">
            <b data-l10n-id="deleteContact">Delete contact</b>
          </button>
        </footer>
      </div>
    </article>
  </template>
</element>