HaCasa Cover Card

hc_cover_card:
  variables:
    cover_entity:
    cover_unit: "%"
    graph_color: white
    show_graph: false
    show_graph_line: true
    show_graph_fill: false
  show_state: true
  styles:
    grid:
      - grid-template-areas: |
          '. i'
          'n n'
          's s'
          'graph graph'
      - grid-template-rows: min-content min-content 1fr
    card:
      - padding: 10px
    name:
      - text-align: left
      - font-family: Montserrat
      - font-weight: 700
      - justify-self: start
      - align-self: end
      - font-size: 1rem
    state:
      - text-align: left
      - font-size: 0.8rem
      - font-family: Montserrat
      - font-weight: 500
      - justify-self: start
      - align-self: center
      - opacity: 0.7
    icon:
      - width: 60%
      - color: white  # Default color for icon
    img_cell:
      - background: var(--opacity-contrast-100)
      - padding: 6px
      - border-radius: 50%
      - width: 25px
      - height: 25px
      - align-self: start
      - margin-bottom: 10px
    custom_fields:
      graph:
        - display: |
            [[[
              if (variables.show_graph) {
                return 'block';
              }
              else {
                return 'none';
              }
            ]]]
        - position: absolute
        - left: 0
        - bottom: 0
        - width: 100%
        - z-index: 1
  state:
    - value: "open"
      styles:
        card:
          - background: var(--color-blue)
        name:
          - color: white
        label:
          - color: white
        state:
          - color: white
        icon:
          - color: white  # White icon for blue background
      state_display: |
        [[[
          if (entity.state === "open") {
            return "Open";
          }
        ]]]
    - value: "closed"
      styles:
        card:
        name:
          - color: white
        label:
          - color: white
        state:
          - color: white
        icon:
          - color: white  # White icon for red background
      state_display: |
        [[[
          if (entity.state === "closed") {
            return "Closed";
          }
        ]]]
    - value: "unknown"
      styles:
        card:
          - background: white  # Change the background to white when the state is "Unknown"
        name:
          - color: black   # Optional: change text color for better contrast
        label:
          - color: black   # Optional: change label color for better contrast
        state:
          - color: black   # Optional: change state text color for better contrast
        icon:
          - color: white   # White icon inside dark circle
        img_cell:
          - background: black  # Dark circle for unknown state
      state_display: |
        [[[
          if (entity.state === "unknown") {
            return "Tilted Open";
          }
        ]]]
    - value: unavailable
      styles:
        name:
          - text-decoration: line-through
        icon:
          - color: var(--icon-color-default)
        img_cell:
          - background: var(--background-icon-color-default)
        card:
          - opacity: 0.6
          - pointer-events: none
  custom_fields:
    graph:
      card:
        type: custom:mini-graph-card
        entities:
          - entity: "[[[ return variables.cover_entity ]]]"
            show_fill: "[[[ return variables.show_graph_fill ]]]"
            show_line: "[[[ return variables.show_graph_line ]]]"
        show:
          name: false
          icon: false
          state: false
        line_width: 2
        line_color: "[[[ return variables.graph_color ]]]"
        card_mod:
          style: |
            ha-card {
              background: none;
              box-shadow: none;
              --ha-card-border-width: 0;
              z-index: 1
            }
  slider:
    entity: "[[[ return variables.cover_entity ]]]"
    name: "Blinds Control"
    min: 0
    max: 100
    step: 1
    unit_of_measurement: "[[[ return variables.cover_unit ]]]"
    type: "slider"
    card_mod:
      style: |
        ha-card {
          background: var(--background-color);
          box-shadow: none;
          padding: 10px
        }