VulpesOS/gaia/apps/communications/contacts/elements/settings.html

<element name="settings" extends="article">
  <template>
    <section data-theme="organic" id="view-settings" role="region" class="skin-organic view view-bottom theme-settings">
      <gaia-header>
        <h1 data-l10n-id="settings"></h1>
        <button id="settings-close" data-l10n-id="done">Done</button>
      </gaia-header>

      <article class="view-body" id="settings-article">
        <section role="region" class="view-body-inner">
          <ul data-type="list" role="presentation">
            <li id="settingsOrder" role="checkbox">
              <gaia-switch name="order.lastname">
                <label data-l10n-id="contactsOrderBy"></label>
              </gaia-switch>
            </li>
          </ul>
          <gaia-subheader skin="organic" id="transfer-contacts-header">
            <span data-l10n-id="transferContactsTitle">Transfer Contacts</span>
          </gaia-subheader>
          <ul data-type="list" id="sources" role="listbox" aria-labelledby="transfer-contacts-header">
            <li role="presentation" id="importContacts" data-source="sim">
              <button role="option" class="icon icon-import" data-l10n-id="importContactsButton">
                Import Contacts
              </button>
            </li>
            <li role="presentation" id="exportContacts" data-source="sd">
              <button role="option" class="icon icon-export" data-l10n-id="exportContactsButton">
                Export Contacts
              </button>
            </li>
          </ul>
          <gaia-subheader skin="organic" id="contacts-management-header">
            <span data-l10n-id="ContactManagementTitle">Contacts Management</span>
          </gaia-subheader>
          <ul data-type="list" id="contactsManagement" role="listbox" aria-labelledby="contacts-management-header">
            <li role="presentation">
              <button role="option" id="set-ice" class="action" data-l10n-id="setICEButton">
                Set ICE Contacts
              </button>
            </li>
            <li role="presentation">
              <button role="option" id="bulkDelete" class="action" data-l10n-id="bulkDeleteButton">
                Delete Contacts
              </button>
            </li>
          </ul>
        </section>
      </article>
    </section>
    <section data-theme="organic" id="import-settings" role="region" class="skin-organic view view-right theme-settings">
      <gaia-header id="import-settings-header" action="back">
        <h1 id='import-settings-title'></h1>
      </gaia-header>
      <article class="view-body">
        <section role="region" class="view-body-inner">
          <ul role="listbox" data-type="list" id="import-options">
            <li role="presentation" id="import-sd-option" data-source="sd">
              <button role="option" class="icon icon-sd" >
                <span data-l10n-id="importMemoryCard">Memory card</span>
                <p><span></span><time></time></p>
              </button>
              <p class="error-message"></p>
            </li>
            <li role="presentation" id="import-gmail-option" class="importService" data-source="gmail">
              <button role="option" class="icon icon-gmail">
                <span data-l10n-id="importGmail">Gmail</span>
                <p><span></span><time></time></p>
              </button>
            </li>
            <li role="presentation" id="import-live-option" class="importService" data-source="live">
              <button role="option" class="icon icon-live">
                <span data-l10n-id="importOutlook">Outlook</span>
                <p><span></span><time></time></p>
              </button>
              <p class="error-message" data-l10n-id="genericNoConnection"></p>
            </li>
          </ul>
          <ul role="listbox" data-type="list" id="export-options">
            <li role="presentation" id="export-sd-option" data-source="sd">
              <button role="option" class="icon icon-sd" data-l10n-id="memoryCard">
                Memory card
              </button>
              <p class="error-message"></p>
            </li>
            <li role="presentation" id="export-bluetooth-option" data-source="bluetooth">
              <button role="option" class="icon icon-bluetooth" data-l10n-id="bluetooth">
                Bluetooth
              </button>
            </li>
          </ul>
        </section>
      </article>
    </section>
    <section data-theme="organic" id="ice-settings" role="region" class="skin-organic view view-right theme-settings">
      <gaia-header id="ice-settings-header" action="back">
        <h1 id='ice-settings-title' data-l10n-id="ICESettingTitle"></h1>
      </gaia-header>
      <article class="view-body">
        <section role="region" class="view-body-inner">
          <p class="description" data-l10n-id="ICEDescription">
            Add two contacts for making “In Case of Emergency” calls.
          </p>
          <ul data-type="list" role="listbox" aria-multiselectable="true">
            <li role="option" id="ice-contacts-1-switch" class="ice-contacts-switch">
              <gaia-switch name="ice-contact-1-enabled">
                <label data-l10n-id="ICEContact1"></label>
              </gaia-switch>
            </li>
            <li role="presentation">
              <button role="option" id="select-ice-contact-1" class="icon icon-view" data-l10n-id="ICESelectContact" disabled>
                Select a contact
              </button>
            </li>
            <li role="option" id="ice-contacts-2-switch" class="ice-contacts-switch">
              <gaia-switch name="ice-contact-2-enabled">
                <label data-l10n-id="ICEContact2"></label>
              </gaia-switch>
            </li>
            <li role="presentation">
              <button role="option" id="select-ice-contact-2" class="icon icon-view" data-l10n-id="ICESelectContact" disabled>
                Select a contact
              </button>
            </li>
          </ul>
        </section>
      </article>
    </section>
  </template>
</element>