uid: caddx_graphic_portrait_V5
tags: []
props:
  parameters:
    - context: item
      description: Alarm Feedback Item
      label: Alarm Feedback Item
      name: alarmFeedback
      required: false
      type: TEXT
    - description: Show Tooltips in Widget
      label: Show Tooltips in Widget
      name: tooltipEnable
      required: false
      type: BOOLEAN
    - description: Replace pincode characters with this string, leave blank to show it as-is
      label: Mask character
      name: mask
      required: false
  parameterGroups: []
timestamp: Jul 13, 2021, 1:39:48 PM
component: f7-page
config:
  style:
    --f7-popup-tablet-width: 40px
    --f7-navbar-height: 35px
    --f7-navbar-font-size: 15px
    --f7-navbar-bg-color: transparent
    --f7-navbar-border-color: transparent
    --f7-navbar-link-color: white
    --f7-navbar-text-color: white
    --f7-navbar-shadow-image: none
    position: absolute
    left: 0px
    top: 0px
    background-color: rgb(220,220,220)
    --f7-card-margin-horizontal: 0px
    border-radius: 30px
    width: 100%
    height: 100%
    --f7-bars-translucent-opacity: none
    --f7-bars-translucent-blur: none
slots:
  default:
    - component: Label
      config:
        text: ="Caddx Control"
        style:
          position: absolute
          left: 40%
          top: 0%
          color: white
          font-size: 25px
          line-height: 32px
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          text-shadow: -1px 1px 1px hsl(0,0%,66%)
    - component: f7-badge
      config:
        bgColor: gray
        style:
          position: absolute
          left: 20%
          top: 5%
          width: 60%
          height: 55px
          border-radius: 0px
    - component: oh-link
      config:
        text: '=(vars.selectedPartition  === NULL) ? "Select Partition" : vars.selectedPartition '
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Selected Partition"'
        raised: true
        large: true
        textColor: white
        bgColor: gray
        style:
          position: absolute
          left: 20%
          top: 5.5%
          width: 60%
    - component: oh-link
      config:
        text: '=(items[props.alarmFeedback].state  === "-") ? "" : (items[props.alarmFeedback].state) '
        raised: true
        large: true
        textColor: white
        bgColor: gray
        style:
          position: absolute
          left: 20%
          top: 5.5%
          width: 60%
          z-index: 999
    - component: oh-link
      config:
        text: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length || 0) : vars.pincode"
        raised: true
        large: true
        textColor: white
        bgColor: gray
        style:
          left: 25%
          top: 4%
          width: 50%
          z-index: 0
    - component: f7-badge
      config:
        bgColor: gray
        text: UP
        style:
          position: absolute
          right: 8.5%
          top: 4.5%
          width: 23px
          height: 23px
          border-radius: 5px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        style:
          position: absolute
          top: 4.0%
          right: 6.8%
          color: white
        iconF7: arrowtriangle_up_fill
        iconSize: 20
        iconColor: black
        action: command
        actionCommand: ON
        actionItem: =(vars.selectedPartition) + '_PlaceHolder'
    - component: f7-badge
      config:
        bgColor: gray
        text: DOWN
        style:
          position: absolute
          right: 8.5%
          top: 9.5%
          width: 23px
          height: 23px
          border-radius: 5px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Show Alarm Logs Drop Down"'
        style:
          position: absolute
          top: 9.0%
          right: 6.8%
          color: white
        iconF7: arrowtriangle_down_fill
        iconSize: 20
        iconColor: black
        action: variable
        actionVariable: showLogs
        actionVariableValue: '=(vars.showLogs == "null") ? true : !(vars.showLogs)'
    - component: f7-badge
      config:
        bgColor: '=(items[vars.selectedPartition + "_Armed"].state === "ON") ? "red" : "gray"'
        text: Armed
        style:
          position: absolute
          left: 5%
          top: 15%
          width: 60px
          height: 20px
          border-radius: 12px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Partition Armed"'
        style:
          position: absolute
          top: 14.5%
          left: 4.5%
          color: white
        text: ARMED
    - component: f7-badge
      config:
        bgColor: '=(items[vars.selectedPartition + "_ReadyToArm"].state === "ON") ? "green" : "gray"'
        style:
          position: absolute
          left: 30%
          top: 15%
          width: 60px
          height: 20px
          border-radius: 12px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Show Faulted Zones (If any)"'
        text: READY
        textColor: white
        action: variable
        actionVariable: Faulted
        actionVariableValue: '=(vars.Faulted == "null") ? true : !(vars.Faulted)'
        style:
          position: absolute
          top: 14.5%
          left: 30%
          color: white
    - component: f7-badge
      config:
        bgColor: gray
        style:
          position: absolute
          left: 60%
          top: 15%
          width: 60px
          height: 20px
          border-radius: 12px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        style:
          position: absolute
          top: 14.5%
          left: 61%
          color: white
        text: FIRE
    - component: f7-badge
      config:
        bgColor: '=(items.Panel_ACPowerOn.state === "ON") ? "green" : "gray"'
        style:
          position: absolute
          left: 80%
          top: 15%
          width: 60px
          height: 20px
          border-radius: 12px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Panel has AC Power (Green)"'
        style:
          position: absolute
          top: 14.5%
          left: 79%
          color: white
        text: POWER
        action: command
        actionCommand: blue
        actionItem: =(vars.selectedPartition) + '_PlaceHolder'
    - component: f7-badge
      config:
        bgColor: '=(items[vars.selectedPartition + "_ErrorBeepTripleBeep"].state === "ON") ? "red" : "gray"'
        text: ERROR
        style:
          position: absolute
          left: 5%
          top: 21%
          width: 60px
          height: 20px
          border-radius: 12px
    - component: oh-link
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Indicates Tripple Beep Error"'
        style:
          position: absolute
          top: 21%
          left: 6%
          color: white
        text: ERROR
    - component: oh-button
      config:
        text: "1"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        action: variable
        actionVariable: pincode
        actionVariableValue: "=(vars.pincode) ? vars.pincode + '1' : '1'"
        style:
          position: absolute
          left: 25%
          top: 20%
          border-radius: 12px
    - component: oh-button
      config:
        text: "2"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        action: variable
        actionVariable: pincode
        actionVariableValue: "=(vars.pincode) ? vars.pincode + '2' : '2'"
        style:
          position: absolute
          left: 42%
          top: 20%
          border-radius: 12px
    - component: oh-button
      config:
        text: "3"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        action: variable
        actionVariable: pincode
        actionVariableValue: "=(vars.pincode) ? vars.pincode + '3' : '3'"
        style:
          position: absolute
          left: 60%
          top: 20%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items[vars.selectedPartition + "_EntryGuard"].state === "ON") ? "green" : "gray"'
        text: Stay
        style:
          position: absolute
          left: 71%
          top: 21%
          width: 25px
          height: 12px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: STAY
        style:
          position: absolute
          left: 80%
          top: 20%
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Arm in STAY Mode"'
        text: STAY
        textColor: white
        action: command
        actionCommand: ON
        actionItem: =(vars.selectedPartition) + '_Stay'
        style:
          position: absolute
          left: 80%
          top: 20%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: FIRE-PANIC
        style:
          position: absolute
          left: 5%
          top: 26%
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Fire Panic"'
        style:
          position: absolute
          top: 26%
          left: 6%
          color: white
        iconF7: flame
        iconSize: 24
        iconColor: red
        action: command
        actionCommand: ON
        actionItem: ='Panel_FirePanic'
    - component: oh-button
      config:
        text: "4"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        action: variable
        actionVariable: pincode
        actionVariableValue: "=(vars.pincode) ? vars.pincode + '4' : '4'"
        style:
          position: absolute
          left: 25%
          top: 26%
          border-radius: 12px
    - component: oh-button
      config:
        text: "5"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        action: variable
        actionVariable: pincode
        actionVariableValue: "=(vars.pincode) ? vars.pincode + '5' : '5'"
        style:
          position: absolute
          left: 42%
          top: 26%
          border-radius: 12px
    - component: oh-button
      config:
        text: "6"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        action: variable
        actionVariable: pincode
        actionVariableValue: "=(vars.pincode) ? vars.pincode + '6' : '6'"
        style:
          position: absolute
          left: 60%
          top: 26%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items[vars.selectedPartition + "_ChimeModeOn"].state === "ON") ? "green" : "gray"'
        text: Chime
        style:
          position: absolute
          left: 71%
          top: 27%
          width: 25px
          height: 12px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: CHIME
        style:
          position: absolute
          left: 80%
          top: 26%
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Toggle CHIME Mode"'
        text: CHIME
        textColor: white
        action: command
        actionCommand: ON
        actionItem: =(vars.selectedPartition) + '_Chime'
        style:
          position: absolute
          left: 79.5%
          top: 26%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: MEDICAL-PANIC
        style:
          position: absolute
          left: 5%
          top: 35%
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Medical Panic"'
        style:
          position: absolute
          top: 35%
          left: 6%
          color: white
        iconF7: plus
        iconSize: 30
        iconColor: green
        action: command
        actionCommand: ON
        actionItem: ='Panel_MedicalPanic'
    - component: oh-button
      config:
        text: "7"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        action: variable
        actionVariable: pincode
        actionVariableValue: "=(vars.pincode) ? vars.pincode + '7' : '7'"
        style:
          position: absolute
          left: 25%
          top: 32%
          border-radius: 12px
    - component: oh-button
      config:
        text: "8"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        action: variable
        actionVariable: pincode
        actionVariableValue: "=(vars.pincode) ? vars.pincode + '8' : '8'"
        style:
          position: absolute
          left: 42%
          top: 32%
          border-radius: 12px
    - component: oh-button
      config:
        text: "9"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        action: variable
        actionVariable: pincode
        actionVariableValue: "=(vars.pincode) ? vars.pincode + '9' : '9'"
        style:
          position: absolute
          left: 60%
          top: 32%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items[vars.selectedPartition + "_Exit1"].state === "ON") ? "green" : "gray"'
        text: Exit
        style:
          position: absolute
          left: 71%
          top: 33%
          width: 25px
          height: 12px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: EXIT
        style:
          position: absolute
          left: 80%
          top: 32%
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Arm in EXIT Mode"'
        text: EXIT
        textColor: white
        action: command
        actionCommand: ON
        actionItem: =(vars.selectedPartition) + '_Exit'
        style:
          position: absolute
          left: 80%
          top: 32%
          border-radius: 12px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        text: "*"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        style:
          position: absolute
          left: 25%
          top: 38%
          border-radius: 12px
    - component: oh-button
      config:
        text: "0"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        action: variable
        actionVariable: pincode
        actionVariableValue: "=(vars.pincode) ? vars.pincode + '0' : '0'"
        style:
          position: absolute
          left: 42%
          top: 38%
          border-radius: 12px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        text: "#"
        raised: true
        large: false
        textColor: white
        bgColor: gray
        style:
          position: absolute
          left: 60%
          top: 38%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items[vars.selectedPartition + "_Bypass_Group"].state === "ON") ? "green" : "gray"'
        text: Bypass?
        style:
          position: absolute
          left: 71%
          top: 39%
          width: 25px
          height: 12px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: BYPASS
        style:
          position: absolute
          left: 80%
          top: 38%
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Allow Zone Bypass via Popup"'
        text: BYPASS
        textColor: white
        action: variable
        actionVariable: Bypass
        actionVariableValue: '=(vars.Bypass == "null") ? true : !(vars.Bypass)'
        style:
          position: absolute
          left: 79%
          top: 38%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: POLICE-PANIC
        style:
          position: absolute
          left: 5%
          top: 44%
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Police Panic"'
        style:
          position: absolute
          top: 44%
          left: 6%
          color: white
        iconF7: shield_fill
        iconSize: 28
        iconColor: blue
        action: command
        actionCommand: ON
        actionItem: ='Panel_PolicePanic'
    - component: f7-badge
      config:
        bgColor: gray
        text: CLEAR
        style:
          position: absolute
          left: 25%
          top: 44%
          width: 30px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        style:
          position: absolute
          top: 44%
          left: 24.5%
          color: white
        iconF7: trash
        iconSize: 21
        iconColor: white
        action: variable
        actionVariable: pincode
        actionVariableValue: ""
    - component: f7-badge
      config:
        bgColor: gray
        text: SUBMIT
        style:
          position: absolute
          left: 42%
          top: 44%
          width: 30px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        style:
          position: absolute
          top: 44%
          left: 41.5%
          color: white
        iconF7: hand_thumbsup
        iconSize: 21
        iconColor: white
        action: command
        disabled: =!vars.pincode
        closePopup: =props.closePopup
        actionItem: =(vars.selectedPartition) + '_Pin_Number' || 'TestString'
        actionCommand: =vars.pincode
        clearVariable: pincode
    - component: f7-badge
      config:
        bgColor: gray
        text: SUBMIT
        style:
          position: absolute
          left: 60%
          top: 44%
          width: 30px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        style:
          position: absolute
          top: 44%
          left: 59%
          color: white
        iconF7: delete_left
        iconSize: 21
        iconColor: white
        action: variable
        actionVariable: pincode
        actionVariableValue: '=(vars.pincode) ? vars.pincode.substring(0, vars.pincode.length - 1) : ""'
    - component: f7-badge
      config:
        bgColor: '=(items[vars.selectedPartition + "_Cancel"].state === "ON") ? "green" : "gray"'
        text: Cancel
        style:
          position: absolute
          left: 71%
          top: 45%
          width: 25px
          height: 12px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: CANCEL
        style:
          position: absolute
          left: 80%
          top: 44%
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        text: CANCEL
        textColor: white
        action: command
        actionCommand: ON
        actionItem: =(vars.selectedPartition) + '_Cancel'
        style:
          position: absolute
          left: 79%
          top: 44%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items.Partition1_Armed.state === "ON") ? "red" : "green"'
        text: Partition 1
        style:
          position: absolute
          left: 5%
          top: 51%
          width: 35px
          height: 20px
          border-radius: 6px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 1 to current run"'
        text: P1
        textColor: white
        action: variable
        actionVariable: selectedPartition
        actionVariableValue: Partition1
        style:
          position: absolute
          left: 5%
          top: 50.5%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items.Partition2_Armed.state === "ON") ? "red" : "green"'
        text: Partition 2
        style:
          position: absolute
          left: 17%
          top: 51%
          width: 35px
          height: 20px
          border-radius: 6px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 2 to current run"'
        text: P2
        textColor: white
        action: variable
        actionVariable: selectedPartition
        actionVariableValue: Partition2
        style:
          position: absolute
          left: 17%
          top: 50.5%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items.Partition3_Armed.state === "ON") ? "red" : "green"'
        text: Partition 3
        style:
          position: absolute
          left: 29%
          top: 51%
          width: 35px
          height: 20px
          border-radius: 6px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 3 to current run"'
        text: P3
        textColor: white
        action: variable
        actionVariable: selectedPartition
        actionVariableValue: Partition3
        style:
          position: absolute
          left: 29%
          top: 50.5%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items.Partition4_Armed.state === "ON") ? "red" : "green"'
        text: Partition 4
        style:
          position: absolute
          left: 41%
          top: 51%
          width: 35px
          height: 20px
          border-radius: 6px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 4 to current run"'
        text: P4
        textColor: white
        action: variable
        actionVariable: selectedPartition
        actionVariableValue: Partition4
        style:
          position: absolute
          left: 41%
          top: 50.5%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items.Partition5_Armed.state === "ON") ? "red" : "gray"'
        text: Partition 5
        style:
          position: absolute
          left: 53%
          top: 51%
          width: 35px
          height: 20px
          border-radius: 6px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 5 to current run"'
        text: P5
        textColor: white
        action: variable
        actionVariable: selectedPartition
        actionVariableValue: Partition5
        style:
          position: absolute
          left: 53%
          top: 50.5%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items.Partition6_Armed.state === "ON") ? "red" : "gray"'
        text: Partition 6
        style:
          position: absolute
          left: 65%
          top: 51%
          width: 35px
          height: 20px
          border-radius: 6px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 6 to current run"'
        text: P6
        textColor: white
        action: variable
        actionVariable: selectedPartition
        actionVariableValue: Partition6
        style:
          position: absolute
          left: 65%
          top: 50.5%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items.Partition7_Armed.state === "ON") ? "red" : "gray"'
        text: Partition 7
        style:
          position: absolute
          left: 77%
          top: 51%
          width: 35px
          height: 20px
          border-radius: 6px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 7 to current run"'
        text: P7
        textColor: white
        action: variable
        actionVariable: selectedPartition
        actionVariableValue: Partition7
        style:
          position: absolute
          left: 77%
          top: 50.5%
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items.Partition8_Armed.state === "ON") ? "red" : "gray"'
        text: Partition 8
        style:
          position: absolute
          left: 89%
          top: 51%
          width: 35px
          height: 20px
          border-radius: 6px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 8 to current run"'
        text: P8
        textColor: white
        action: variable
        actionVariable: selectedPartition
        actionVariableValue: Partition8
        style:
          position: absolute
          left: 89%
          top: 50.5%
          border-radius: 12px
    - component: f7-list
      config:
        visible: =(vars.Faulted) == true
        style:
          background: rgb(235, 232, 232)
          position: absolute
          left: 20%
          top: 16%
          width: 60%
          --f7-list-border-color: transparent
          opacity: 80%
        class:
          - padding-bottom
      slots:
        default:
          - component: Label
            config:
              text: Zones Faulted
              style:
                background: rgb(191, 189, 189)
                padding-left: 20px
                font-weight: 500
                line-height: 20px
                font-size: 75%
          - component: oh-repeater
            config:
              fragment: true
              for: item
              sourceType: itemsInGroup
              groupItem: =(vars.selectedPartition) + '_Zones'
            slots:
              default:
                - component: oh-list-item
                  config:
                    visible: =items[loop.item.name].state == "OPEN"
                    title: =loop.item.label
                    item: =loop.item.name
                    color: '=(items[loop.item.name].state == "ON") ? "red" : "gray"'
                    style:
                      backgroundColor: rgb(235, 232, 232)
                      font-size: 70%
                      --f7-list-item-min-height: 14px
                      --f7-list-item-padding-vertical: 1px
                      --f7-list-item-border-color: transparent
    - component: f7-list
      config:
        visible: =(vars.Bypass) == true
        style:
          position: absolute
          left: 20%
          top: 16%
          width: 60%
          --f7-list-border-color: transparent
          opacity: 80%
        class:
          - padding-bottom
          - big-toggles
      slots:
        default:
          - component: Label
            config:
              text: Zones Bypassed
              style:
                padding-left: 20px
                font-weight: 500
                line-height: 20px
                backgroundColor: rgb(191, 189, 189)
                font-size: 75%
          - component: oh-repeater
            config:
              fragment: true
              for: item
              sourceType: itemsInGroup
              groupItem: =(vars.selectedPartition) + '_Bypass_Group'
            slots:
              default:
                - component: oh-toggle-item
                  config:
                    title: =loop.item.label
                    item: =loop.item.name
                    color: '=(items[loop.item.name].state == "ON") ? "green" : "gray"'
                    style:
                      backgroundColor: rgb(235, 232, 232)
                      font-size: 70%
                      --f7-toggle-width: 35px
                      --f7-toggle-height: 10px
                      --f7-list-item-min-height: 14px
                      --f7-list-item-padding-vertical: 1px
                      --f7-list-item-border-color: transparent
    - component: f7-list
      config:
        visible: =(vars.showLogs) == true
        noChevron: false
        style:
          background: rgb(235, 232, 232)
          position: absolute
          left: 20%
          top: 16%
          width: 60%
          --f7-list-border-color: transparent
          opacity: 80%
        class:
          - padding-bottom
      slots:
        default:
          - component: Label
            config:
              text: Alarm Logs
              style:
                padding-left: 1%
                font-weight: 500
                line-height: 150%
                backgroundColor: rgb(191, 189, 189)
                font-size: 80%
          - component: f7-list-item
            config:
              accordionItem: true
              title: =items.Panel_LogMessage10.state
              style:
                font-size: 75%
                color: black
                backgroundColor: rgb(235, 232, 232)
                --f7-list-item-border-color: transparent
                --f7-list-item-title-line-height: 100%
                --f7-list-item-padding-horizontal: 10px
                --f7-list-item-min-height: 14px
            slots:
              default:
                - component: f7-accordion-content
                  slots:
                    default:
                      - component: f7-list-item
                        config:
                          title: =items.Panel_LogMessage9.state
                          style:
                            font-size: 75%
                      - component: f7-list-item
                        config:
                          title: =items.Panel_LogMessage8.state
                          style:
                            font-size: 75%
                      - component: f7-list-item
                        config:
                          title: =items.Panel_LogMessage7.state
                          style:
                            font-size: 75%
                      - component: f7-list-item
                        config:
                          title: =items.Panel_LogMessage6.state
                          style:
                            font-size: 75%
                      - component: f7-list-item
                        config:
                          title: =items.Panel_LogMessage5.state
                          style:
                            font-size: 75%
                      - component: f7-list-item
                        config:
                          title: =items.Panel_LogMessage4.state
                          style:
                            font-size: 75%
                      - component: f7-list-item
                        config:
                          title: =items.Panel_LogMessage3.state
                          style:
                            font-size: 75%
                      - component: f7-list-item
                        config:
                          title: =items.Panel_LogMessage2.state
                          style:
                            font-size: 75%
                      - component: f7-list-item
                        config:
                          title: =items.Panel_LogMessage1.state
                          style:
                            font-size: 75%