<!-- =========================
     LISTS
========================= -->
<section class="ui_section" id="lists">
  <h2 class="ui_section_title">Lists</h2>

  <!-- Basic unordered list -->
  <div class="ui_block">
    <h3 class="ui_block_title">Unordered list</h3>

    <ul class="ui_list">
      <li class="ui_list_item">Dashboard</li>
      <li class="ui_list_item">Devices</li>
      <li class="ui_list_item">Scenes</li>
      <li class="ui_list_item">Automations</li>
      <li class="ui_list_item">Settings</li>
    </ul>
  </div>

  <!-- Ordered list -->
  <div class="ui_block">
    <h3 class="ui_block_title">Ordered list</h3>

    <ol class="ui_list ui_list_ordered">
      <li class="ui_list_item">Connect device to Wi-Fi</li>
      <li class="ui_list_item">Register device on server</li>
      <li class="ui_list_item">Assign device to area</li>
      <li class="ui_list_item">Verify status</li>
    </ol>
  </div>

  <!-- List with icons / markers -->
  <div class="ui_block">
    <h3 class="ui_block_title">List with markers / icons</h3>

    <ul class="ui_list ui_list_marked">
      <li class="ui_list_item">
        <span class="ui_list_marker">●</span>
        Online
      </li>
      <li class="ui_list_item">
        <span class="ui_list_marker">●</span>
        Degraded
      </li>
      <li class="ui_list_item">
        <span class="ui_list_marker">●</span>
        Offline
      </li>
    </ul>
  </div>

  <!-- Definition list -->
  <div class="ui_block">
    <h3 class="ui_block_title">Definition list</h3>

    <dl class="ui_list ui_list_definition">
      <div class="ui_list_row">
        <dt class="ui_list_term">Device</dt>
        <dd class="ui_list_desc">Физическое устройство в системе</dd>
      </div>

      <div class="ui_list_row">
        <dt class="ui_list_term">Area</dt>
        <dd class="ui_list_desc">Логическая зона размещения устройств</dd>
      </div>

      <div class="ui_list_row">
        <dt class="ui_list_term">Scene</dt>
        <dd class="ui_list_desc">Набор действий, выполняемых одновременно</dd>
      </div>
    </dl>
  </div>

  <!-- Interactive / navigation list -->
  <div class="ui_block">
    <h3 class="ui_block_title">Navigation / interactive list</h3>

    <ul class="ui_list ui_list_nav">
      <li class="ui_list_item ui_list_item_active">
        <button class="ui_list_action" type="button">
          <span class="ui_list_label">Overview</span>
        </button>
      </li>

      <li class="ui_list_item">
        <button class="ui_list_action" type="button">
          <span class="ui_list_label">Devices</span>
          <span class="ui_list_meta">12</span>
        </button>
      </li>

      <li class="ui_list_item">
        <button class="ui_list_action" type="button">
          <span class="ui_list_label">Logs</span>
        </button>
      </li>

      <li class="ui_list_item ui_list_item_disabled">
        <button class="ui_list_action" type="button" disabled>
          <span class="ui_list_label">Advanced</span>
        </button>
      </li>
    </ul>
  </div>

  <!-- List with actions -->
  <div class="ui_block">
    <h3 class="ui_block_title">List with actions</h3>

    <ul class="ui_list ui_list_actions">
      <li class="ui_list_item">
        <div class="ui_list_content">
          <div class="ui_list_title">Kitchen Light</div>
          <div class="ui_list_subtitle">192.168.1.21</div>
        </div>
        <div class="ui_list_controls">
          <button class="ui_btn ui_btn_small ui_btn_secondary" type="button">Open</button>
          <button class="ui_btn ui_btn_small ui_btn_accent" type="button">Toggle</button>
        </div>
      </li>

      <li class="ui_list_item">
        <div class="ui_list_content">
          <div class="ui_list_title">Hall Sensor</div>
          <div class="ui_list_subtitle">192.168.1.34</div>
        </div>
        <div class="ui_list_controls">
          <button class="ui_btn ui_btn_small ui_btn_secondary" type="button">Open</button>
          <button class="ui_btn ui_btn_small ui_btn_danger" type="button">Restart</button>
        </div>
      </li>

      <li class="ui_list_item ui_list_item_muted">
        <div class="ui_list_content">
          <div class="ui_list_title">Garage Relay</div>
          <div class="ui_list_subtitle">Offline</div>
        </div>
        <div class="ui_list_controls">
          <button class="ui_btn ui_btn_small ui_btn_secondary" type="button" disabled>Open</button>
          <button class="ui_btn ui_btn_small ui_btn_accent" type="button" disabled>Toggle</button>
        </div>
      </li>
    </ul>
  </div>

  <!-- Nested list -->
  <div class="ui_block">
    <h3 class="ui_block_title">Nested list</h3>

    <ul class="ui_list">
      <li class="ui_list_item">
        Floor 1
        <ul class="ui_list ui_list_nested">
          <li class="ui_list_item">Kitchen</li>
          <li class="ui_list_item">Living room</li>
        </ul>
      </li>

      <li class="ui_list_item">
        Floor 2
        <ul class="ui_list ui_list_nested">
          <li class="ui_list_item">Bedroom</li>
          <li class="ui_list_item">Office</li>
        </ul>
      </li>
    </ul>
  </div>
</section>