# Cover.yaml
# Built-in layouts for the Cover widget.
# This file is part of Reactor. Copyright (c) 2020-2023 Patrick H. Rigney, All Rights Reserved.
---
version: 23023
defaultlayout: default
layouts:
  default:
    content: |
      <div class="ff" style="height: 100%; display: flex; flex-wrap: wrap;">
          <h1 class="widget-title" data-bind='data("title");entity?.name;#[cover]'></h1>
          <h2 class="widget-value" data-bind='entity?.primary_value?"open":"closed";#'></h2>
      </div>
      <div class="widget-body"><i class="bi"></i></div>
    # not active (closed) f126 arrow-down-square
    # active (open) f146 arrow-up-square-fill
    styles: |
      $ i { font-size: 3rem; }
      $:not(.active) i { color: green; }
      $:not(.active) i::before { content: "\f126"; }
      $.active i { color: red !important; }
      $.active i::before { content: "\f146"; }
      $.update-pending { background-color: var(--color1) !important; color: var(--color1-text); }
      $ h1.widget-title { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; padding-top: 0.33rem; }
      $ h2.widget-value { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; margin-top: auto; padding-bottom: 0.33rem; }
      $ div.widget-body { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
    active_expression: bool(entity.primary_value)
    default_action:
      action: toggle.toggle
