<!--
Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<section id="host-list-div" class="host-list-container">

  <div id="me2me-first-run">
    <h2 i18n-content="MODE_ME2ME"></h2>
    <div>
      <p class="infographic-description"
         i18n-content="ME2ME_FIRST_RUN"></p>
      <button id="get-started-me2me"
              i18n-content="GET_STARTED"
              disabled></button>
    </div>
    <div class="infographic">
      <img src="infographic_my_computers.webp">
    </div>
  </div>

  <div id="me2me-content">
    <h2>
      <span i18n-content="MODE_ME2ME"></span>
      <span class="h2-secondary" id="host-list-loading-indicator">
        <a href="#" id="host-list-reload"
           class="icon-black"
           i18n-title="TOOLTIP_REFRESH">
          <img src="reload.webp">
        </a>
        <img src="spinner.gif" id="host-list-loading">
      </span>
    </h2>

    <div id="host-list" hidden></div>

    <div id="host-list-error" class="box" hidden>
      <div id="host-list-error-message" class="error-state"></div>
      <div class="box-spacer"></div>
      <button type="button"
              id="host-list-refresh-failed-button"></button>
    </div>

    <div id="host-list-empty" hidden>
      <div id="host-list-empty-hosting-supported"
           class="host-list-empty-instructions"
           i18n-content="HOST_LIST_EMPTY_HOSTING_SUPPORTED"
           i18n-value-name-1="HOME_DAEMON_START_BUTTON">
      </div>
      <div id="host-list-empty-hosting-unsupported"
           class="host-list-empty-instructions"
           i18n-content="HOST_LIST_EMPTY_HOSTING_UNSUPPORTED"
           i18n-value-name-1="HOME_DAEMON_START_BUTTON">
      </div>
    </div>

    <div id="daemon-control" data-daemon-state="enabled disabled" hidden>
      <div class="section-row no-non-local-hosts"
           data-daemon-state="disabled">
        <img src="icon_host.webp" class="host-list-main-icon">
        <div class="box-spacer host-list-label"
             id="start-daemon-message"
             i18n-content="HOME_DAEMON_START_MESSAGE"></div>
        <button type="button"
                id="start-daemon"
                i18n-content="HOME_DAEMON_START_BUTTON">
        </button>
      </div> <!-- disabled -->
      <div id="this-host-connect"
           class="section-row clickable no-non-local-hosts"
           data-daemon-state="enabled">
        <div class="host-list-main-icon">
          <span id="this-host-warning" hidden></span>
          <img id="this-host-icon"
               src="icon_host.webp">
        </div>
        <div id="this-host-name" class="box-spacer"></div>
        <span id="this-host-rename"
              class="host-list-edit"
              tabIndex="0"
              i18n-title="TOOLTIP_RENAME">
          <img class="host-list-rename-icon"
               src="icon_pencil.webp">
        </span>
        <button type="button"
                id="stop-daemon"
                i18n-content="HOME_DAEMON_STOP_BUTTON">
        </button>
      </div> <!-- this-host-connect -->
      <div data-daemon-state="enabled">
        <div>
          <span i18n-content="HOME_DAEMON_ACTIVE_MESSAGE"></span>
          <a id="change-daemon-pin"
             href="#"
             i18n-content="HOME_DAEMON_CHANGE_PIN_LINK"></a>
        </div>
        <div id="paired-client-manager-message" hidden>
          <span i18n-content="HOME_DAEMON_PAIRED_MESSAGE"></span>
          <a href="#"
             id="open-paired-client-manager-dialog"
             i18n-content="HOME_DAEMON_MANAGE_PAIRINGS"></a>
        </div>
      </div> <!-- enabled -->
    </div> <!-- daemon-control -->

  </div> <!-- me2me-content -->

</section> <!-- host-list-div -->