type: custom:button-card
entity: sensor.temp_livingroom
triggers_update: all
aspect_ratio: 2.13/1
styles:
  grid:
    - grid-template-areas: "\"icon corner\" \"n n\""
    - grid-template-columns: 1fr 1fr 1fr
    - grid-template-rows: 1fr 2fr
  card:
    - background: linear-gradient(#555599,#444488,#333377)
    - font-weight: bold
    - filter: drop-shadow(0 0 1px black)
    - text-shadow: 0 0 2px black
    - opacity: |
        [[[
          if (!entity?.state || ['unavailable', 'unknown', ''].includes(entity.state))
            return '50%'
          else return '100%'
        ]]]
    - text-transform: capitalize
    - font-size: 11px
    - padding: 5%
  name:
    - z-index: 1
    - pointer-events: none
    - filter: drop-shadow(0 0 1px black)
    - place-self: end start
    - font-size: 14px
    - overflow: visible
    - margin-bottom: "-3px"
  img_cell:
    - justify-content: start
    - scale: 1.5
    - padding: 10%
  icon:
    - filter: drop-shadow(0 0 1px black)
    - padding-left: 10%
    - padding-top: 10%
  custom_fields:
    icon:
      - z-index: 1
      - pointer-events: none
      - padding-top: 1em
      - width: 2em
      - filter: |
          [[[
            if (!entity?.state || ['unavailable', 'unknown', ''].includes(entity.state))
              return 'drop-shadow(0 0 1px black) grayscale(100%)'
            else return 'drop-shadow(0 0 1px black) grayscale(0%)'
          ]]]
    corner:
      - z-index: 2
      - pointer-events: none
      - position: absolute
      - overflow: visible
      - filter: drop-shadow(0 0 1px black)
      - background: rgb(0,0,0,25%)
      - padding-top: 2%
      - padding-bottom: 2%
      - padding-left: 4%
      - padding-right: 4%
      - border-radius: 5px
      - border-style: solid
      - border-color: black
      - border-width: 1px
      - font-size: 12px
      - right: 5%
      - top: 10%
    corner2:
      - z-index: 2
      - pointer-events: none
      - position: absolute
      - overflow: visible
      - filter: drop-shadow(0 0 1px black)
      - background: rgb(0,0,0,25%)
      - padding-top: 2%
      - padding-bottom: 2%
      - padding-left: 4%
      - padding-right: 4%
      - border-radius: 5px
      - border-style: solid
      - border-color: black
      - border-width: 1px
      - font-size: 12px
      - right: 5%
      - top: 50%
    addon_batt:
      - z-index: -3
      - pointer-events: none
      - position: absolute
      - overflow: visible
      - filter: drop-shadow(0 0 10px black)
      - font-size: 0
      - transform: scale(0.5)
      - top: 40%
      - left: 70%
    addon_graph:
      - z-index: "-10"
      - pointer-events: none
      - position: absolute
      - overflow: visible
      - "--card-background-color": rgba(0, 0, 0, 0.0)
      - "--ha-card-border-width": 0px
      - bottom: 0%
      - left: 0%
      - width: 100%
      - filter: drop-shadow(0 0 1px black)
custom_fields:
  addon_graph:
    card:
      type: custom:mini-graph-card
      color_thresholds:
        - color: "#0000ff"
          value: 1
        - color: "#00ffff"
          value: 24
        - color: "#00ff00"
          value: 26
        - color: "#ffa500"
          value: 28
        - color: "#ff0000"
          value: 30
      hours_to_show: |
        [[[
          return states['input_select.lovelace_history_graph'].state
        ]]]
      line_width: 5
      points_per_hour: |
        [[[
          return states['input_number.lovelace_history_graph_points'].state
        ]]]
      show:
        fill: true
        name: false
        icon: false
        state: false
        points: false
        legend: false
        labels: false
        avergage: false
        labels_secondary: false
        loading_indicator: false
      entities: |
        [[[
          if (entity && entity.state && !['unavailable', 'unknown', ''].includes(entity.state))
            return [entity.entity_id]
        ]]]


  addon_batt:
    card:
      colors:
        gradient: true
        steps:
          - "#ff0000"
          - "#ffff00"
          - "#008000"
      type: custom:battery-state-entity
      entity: |
        [[[
          return entity.entity_id.replace("binary_sensor", "sensor").concat("_battery")
        ]]]
  corner: |
    [[[
      if (!entity?.state || ['unavailable', 'unknown', ''].includes(entity.state)) return;
      else return Math.round(entity.state) + " °C"
    ]]]
  icon: |
    [[[
      let ac_low = states['input_number.ac_low'].state
      let ac_high = states['input_number.ac_high'].state
      if (entity.state>ac_high) return `
      <svg viewBox="0 0 50 50">
        <path fill="white" d="M35.1 36.95C35.1 43.05 30.16 48 24.05 48C22.75 48 21.5 47.78 20.34 47.36C17.22 46.25 14.75 43.78 13.63 40.66C13.22 39.5 13 38.25 13 36.95C13 32.93 15.14 29.41 18.35 27.48V5.7C18.35 2.57 20.92 0 24.05 0C24.98 0 25.85 0.22 26.63 0.63C27.71 1.18 28.58 2.06 29.13 3.13C29.53 3.9 29.75 4.78 29.75 5.7V27.48C32.96 29.41 35.1 32.93 35.1 36.95Z"/>
        <path fill="red" d="M27.64 5.7V15.35V28.67L28.66 29.29C31.37 30.92 32.99 33.79 32.99 36.95C32.99 41.88 28.98 45.89 24.05 45.89C19.12 45.89 15.11 41.88 15.11 36.95C15.11 33.79 16.73 30.92 19.44 29.29L20.46 28.67V5.7C20.46 3.72 22.07 2.11 24.05 2.11C25.76 2.11 27.2 3.32 27.56 4.93C27.61 5.18 27.64 5.44 27.64 5.7Z"/>
      </svg>`
      else if (entity.state>ac_low&&entity.state<=ac_high) return `
      <svg viewBox="0 0 50 50">
        <path fill="white" d="M35.1 36.95C35.1 43.05 30.16 48 24.05 48C22.75 48 21.5 47.78 20.34 47.36C17.22 46.25 14.75 43.78 13.63 40.66C13.22 39.5 13 38.25 13 36.95C13 32.93 15.14 29.41 18.35 27.48V5.7C18.35 2.57 20.92 0 24.05 0C24.98 0 25.85 0.22 26.63 0.63C27.71 1.18 28.58 2.06 29.13 3.13C29.53 3.9 29.75 4.78 29.75 5.7V27.48C32.96 29.41 35.1 32.93 35.1 36.95Z"/>
        <path fill="green" d="M27.64 5.7V15.35V28.67L28.66 29.29C31.37 30.92 32.99 33.79 32.99 36.95C32.99 41.88 28.98 45.89 24.05 45.89C19.12 45.89 15.11 41.88 15.11 36.95C15.11 33.79 16.73 30.92 19.44 29.29L20.46 28.67V5.7C20.46 3.72 22.07 2.11 24.05 2.11C25.76 2.11 27.2 3.32 27.56 4.93C27.61 5.18 27.64 5.44 27.64 5.7Z"/>
      </svg>`
      else if (entity.state>0&&entity.state<=ac_low) return `
      <svg viewBox="0 0 50 50">
        <path fill="white" d="M35.1 36.95C35.1 43.05 30.16 48 24.05 48C22.75 48 21.5 47.78 20.34 47.36C17.22 46.25 14.75 43.78 13.63 40.66C13.22 39.5 13 38.25 13 36.95C13 32.93 15.14 29.41 18.35 27.48V5.7C18.35 2.57 20.92 0 24.05 0C24.98 0 25.85 0.22 26.63 0.63C27.71 1.18 28.58 2.06 29.13 3.13C29.53 3.9 29.75 4.78 29.75 5.7V27.48C32.96 29.41 35.1 32.93 35.1 36.95Z"/>
        <path fill="blue" d="M27.64 5.7V15.35V28.67L28.66 29.29C31.37 30.92 32.99 33.79 32.99 36.95C32.99 41.88 28.98 45.89 24.05 45.89C19.12 45.89 15.11 41.88 15.11 36.95C15.11 33.79 16.73 30.92 19.44 29.29L20.46 28.67V5.7C20.46 3.72 22.07 2.11 24.05 2.11C25.76 2.11 27.2 3.32 27.56 4.93C27.61 5.18 27.64 5.44 27.64 5.7Z"/>
      </svg>`
    ]]]