<section class="ui_section" id="modals">
  <h2 class="ui_section_title">Modals</h2>

  <div class="ui_block">
    <h3 class="ui_block_title">Open triggers</h3>

    <button class="ui_btn ui_btn_primary" type="button">Open modal</button>
    <button class="ui_btn ui_btn_accent" type="button">Open confirm modal</button>
  </div>

  <div class="ui_block">
    <h3 class="ui_block_title">Basic modal (structure)</h3>

    <div class="ui_modal" aria-hidden="true">
      <div class="ui_modal_backdrop"></div>

      <div class="ui_modal_panel" role="dialog" aria-modal="true" aria-labelledby="ui_modal_title_basic">
        <header class="ui_modal_header">
          <h4 class="ui_modal_title" id="ui_modal_title_basic">Basic modal</h4>
          <button class="ui_btn ui_btn_icon" type="button" aria-label="Close">✕</button>
        </header>

        <div class="ui_modal_body">
          <p class="ui_text">Любой контент: текст, формы, списки.</p>

          <div class="ui_form_group">
            <label class="ui_label" for="modal_device_name">Device name</label>
            <input class="ui_input" id="modal_device_name" type="text" placeholder="Kitchen Light">
          </div>

          <div class="ui_form_group">
            <label class="ui_label" for="modal_device_desc">Description</label>
            <textarea class="ui_textarea" id="modal_device_desc" rows="3" placeholder="Optional"></textarea>
          </div>
        </div>

        <footer class="ui_modal_footer">
          <button class="ui_btn ui_btn_secondary" type="button">Cancel</button>
          <button class="ui_btn ui_btn_primary" type="button">Save</button>
        </footer>
      </div>
    </div>
  </div>

  <div class="ui_block">
    <h3 class="ui_block_title">Confirm modal (structure)</h3>

    <div class="ui_modal ui_modal_confirm" aria-hidden="true">
      <div class="ui_modal_backdrop"></div>

      <div class="ui_modal_panel" role="dialog" aria-modal="true" aria-labelledby="ui_modal_title_confirm" aria-describedby="ui_modal_desc_confirm">
        <header class="ui_modal_header">
          <h4 class="ui_modal_title" id="ui_modal_title_confirm">Confirm action</h4>
          <button class="ui_btn ui_btn_icon" type="button" aria-label="Close">✕</button>
        </header>

        <div class="ui_modal_body">
          <p class="ui_text" id="ui_modal_desc_confirm">
            Перезагрузить устройство <strong class="ui_strong">Hall Sensor</strong>?
          </p>
          <p class="ui_hint">Действие займёт до 10 секунд.</p>
        </div>

        <footer class="ui_modal_footer">
          <button class="ui_btn ui_btn_secondary" type="button">Cancel</button>
          <button class="ui_btn ui_btn_danger" type="button">Restart</button>
        </footer>
      </div>
    </div>
  </div>
</section>