# Level.yaml
# Built-in layouts for the Level widget.
# This file is part of Reactor. Copyright (c) 2020-2025 Patrick H. Rigney, All Rights Reserved.
---
version: 25080
defaultlayout: switch-icon
layouts:
  switch-icon:
    content: |
      <div class="ff" style="height: 100%; display: flex; flex-wrap: wrap;">
          <h1 class="widget-title" data-bind='data("title");entity.name;#[light]'></h1>
          <h2 class="widget-value" data-bind='{{active-expr}};bool(entity.primary_value) ? "On" : "Off"'></h2>
      </div>
      <div class="widget-body">
          <i data-bind="<class>{{icon-expr}};data('icon');#bi-power" class="bi"></i>
      </div>
    styles: |
      $ i { font-size: 4rem; }
      $.active i { color: yellow !important; }
      $.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

  switch-bulb:
    content: |
      <div class="ff" style="height: 100%; display: flex; flex-wrap: wrap;">
          <h1 class="widget-title" data-bind='data("title");entity?.name;#[light]'></h1>
          <h2 class="widget-value" data-bind='{{active-expr}};bool(entity?.primary_value) ? "On" : "Off"'></h2>
      </div>
      <div class="widget-body">
        <i data-bind="<class>{{icon-expr}};data('icon');#bi-lightbulb" class="bi"></i>
      </div>
      $ 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%; }
    styles: |
      $ i { font-size: 4rem; }
      $.active i { color: yellow !important; }
      $.update-pending { background-color: var(--color1) !important; color: var(--color1-text); }
    active_expression: bool(entity.primary_value)
    default_action:
      action: toggle.toggle

  switch-box:
    content: |
      <div class="ff" style="height: 100%; display: flex; flex-wrap: wrap;">
          <h1 class="widget-title" data-bind='data("title");entity?.name;#[switch]'></h1>
          <h2 class="widget-value" data-bind='{{active-expr}};bool(entity?.primary_value);#'></h2>
      </div>
      <div class="widget-body"><i class="bi"></i></div>
    # not active f584 square
    # active f582 square-full
    styles: |
      $ i { font-size: 2rem; }
      $:not(.active) i::before { content: "\f584"; }
      $.active i { color: yellow !important; }
      $.active i::before { content: "\f582"; }
      $.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

  lock:
    content: |
      <div class="ff" style="height: 100%; display: flex; flex-wrap: wrap;">
          <h1 class="widget-title" data-bind='data("title");entity?.name;#[lock]'></h1>
          <h2 class="widget-value" data-bind='{{active-expr}};bool(entity?.primary_value) ? "Locked" : "Unlocked"'></h2>
      </div>
      <div class="widget-body"><i class="bi"></i></div>
    styles: |
      $ i { font-size: 4rem; }
      $:not(.active) i { color: green; }
      $:not(.active) i::before { content: "\f47b"; }
      $.active i { color: red !important; }
      $.active i::before { content: "\f600"; } /* f5ff is outline version */
      $.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: "!entity.attributes.lock.state"
    default_action:
      action: toggle.toggle

  valve:
    content: |
      <div class="ff" style="height: 100%; display: flex; flex-wrap: wrap;">
          <h1 class="widget-title" data-bind='data("title");entity?.name;#[valve]'></h1>
          <h2 class="widget-value" data-bind='{{active-expr}};bool(entity?.primary_value) ? "Open" : "Closed"'></h2>
      </div>
      <div class="widget-body"><i class="bi"></i></div>
    styles: |
      $ i { font-size: 4rem; }
      $:not(.active) i { color: green; }
      $:not(.active) i::before { content: "\f30b"; }
      $.active i { color: red !important; }
      $.active i::before { content: "\f30d"; }
      $.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: "!entity.attributes.valve.state"
    default_action:
      action: toggle.toggle

  slider:
    # This layout is not current working ???
    content: |
      <h1 class="widget-title" data-bind='data("title");entity.name;#[light]'></h1>
      <h2 class="widget-value" data-bind="{{value-expr}};int(entity.attributes.dimming.level*100+0.5);$---"></h2>
      <div class="widget-body-full">
        <div id="slider"></div>
      </div>
    styles: |
      $ .ui-slider { width: 80%; height: 1rem; margin: auto auto; }
      $ .ui-slider .ui-slider-handle { top: -0.8em; height: 2.4rem; width: 1.4rem; }
      $ .widget-value::after { content: "%"; }
      $.active { background-color: var(--color-active-background) !important; color: var(--color-active-text); }
      $.update-pending { background-color: var(--color1) !important; color: var(--color1-text); }
    active_expression: bool(entity.primary_value)
    #default_action:
    #  action: toggle.toggle

  gauge:
    # This layout is not currently working ???
    content: |
      <h1 class="widget-title" data-bind='data("title");entity.name;#[light]'></h1>
      <input class='dial' data-width='120' data-height='120' data-displayInput='true' data-displayPrevious='true' data-min='0' data-max='100' data-step='5' data-angleOffset='-120' data-angleArc='240' value='0'>
      <div class='levelbuttons'>
        <button class='lighton' data-action='on'>100%</button>
        <button class='lightoff' data-action='power_switch.off'>Off</button>
      </div>
    styles: |
      $ h2 { font-size: 0.667em; font-weight: normal; line-height: 1.3em; overflow: hidden; margin-top: 0.5em; }
      $ .levelbuttons { z-index: 1; margin: -24px 0 0 0; padding: 0 0 0 0; }
      $ .levelbuttons button { width: 4em; height: 2em; margin-right: 0.5em; }
      $.active { background-color: var(--color-active-background) !important; color: var(--color-active-text); }
      $.update-pending { background-color: var(--colorUpdatePending) !important; color: var(--color1-text); }
    active_expression: bool(entity.primary_value)
    default_action:
      action: toggle.toggle
    actions:
      'on':
        action: dimming.set
        parameters:
          level:
            value: 1

  step:
    content: |
      <div class="ff" style="display: flex; flex-wrap: wrap;">
          <h1 class="widget-title" data-bind='data("title");entity.name;#[step]'></h1>
      </div>
      <div class="widget-body">
        <div class="levelbutton" data-action="up">
          <i class="bi bi-caret-up-fill"></i>
        </div>
        <div class="levelvalue" data-bind="{{level-expr}};int(entity.attributes.dimming.level*100);#[level]"></div>
        <div class="levelbutton" data-action="down">
          <i class="bi bi-caret-down-fill"></i>
        </div>
      </div>
    styles: |
      $ div.levelbutton { font-size: 2rem; line-height: 1.2em; z-index: 1; padding: 0 0; text-align: center; }
      $ div.levelvalue { font-size: 2rem; line-height: 1.2em; padding: 4px 0; text-align: center; width: 100%; }
      $ div.levelvalue:after { content: "%"; }
      $.active .widget-body { color: var(--color-active-text) !important; }
      $.update-pending { background-color: var(--colorUpdatePending) !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; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
    active_expression: bool(entity.primary_value)
    default_action:
      action: toggle.toggle
    actions:
      up: dimming.up
      down: dimming.down

  updown:
    content: |
      <div class="ff" style="display: flex; flex-wrap: wrap;">
          <h1 class="widget-title" data-bind='data("title");entity.name;#[updown]'></h1>
      </div>
      <div class="widget-body">
        <div class="levelbutton" data-action="up">
          <i class="bi bi-arrow-up-short"></i>
        </div>
        <div class="levelvalue" data-bind="{{level-expr}};#[level]"></div>
        <div class="levelbutton" data-action="down">
          <i class="bi bi-arrow-down-short"></i>
        </div>
      </div>
    styles: |
      $ div.levelbutton { font-size: 2rem; line-height: 1.2em; z-index: 1; padding: 0 0; text-align: center; width: 100%; }
      $ div.levelvalue { font-size: 2rem; line-height: 1.2em; padding: 4px 0; text-align: center; }
      $ div.levelvalue:after { content: ""; }
      $.active .widget-body { color: var(--color-active-text) !important; }
      $.update-pending { background-color: var(--colorUpdatePending) !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; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
    #active_expression: bool(entity.primary_value)
    default_action:
      action: false
    actions:
      up:
        function: doIncrement
      down:
        function: doDecrement
