### Example Usage of `hc_graph_card` in Home Assistant

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_graph_card.md

Demonstrates how to integrate the `hc_graph_card` into a Home Assistant configuration, specifying the sensor entity and an optional color.

```yaml
  - type: custom:button-card
    template: hc_graph_card
    entity: <sensor entity>
    variables:
        color: <desired color>
```

--------------------------------

### Example Usage of hc_media_card in YAML

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_media_card.md

This YAML snippet demonstrates how to integrate the `hc_media_card` into a Home Assistant dashboard using `custom:button-card` and specifying a media entity.

```yaml
  - type: custom:button-card
    template: hc_media_card
    entity: <media entity>
```

--------------------------------

### Define a Default HaCasa Dashboard View

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/installation/configuration.md

This YAML snippet defines a default view for the HaCasa dashboard, named 'Home', with a specific path and icon. It includes example cards, such as a header card and a title card, demonstrating how to structure the initial display of the dashboard. Users should modify entity values to match their Home Assistant setup.

```yaml
title: Home
path: "home"
icon: fapro:house-fill
cards:
  - type: vertical-stack
    cards:
      - type: custom:button-card
        template: hc_header_card
        entity: weather.buienradar
      - type: custom:button-card
        template: hc_title_card
        name: "Welcome Home"
        label: "What are you up to"
```

--------------------------------

### Default HaCasa View File (00-default-view.yaml)

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/first-page.md

This YAML snippet illustrates the initial content of a HaCasa view file, typically `00-default-view.yaml`. It defines the view's title, path, icon, and a basic card structure including a header and a welcome title card, serving as a starting point for customization.

```YAML
title: Home
path: "home"
icon: fapro:house-fill
cards:
    - type: vertical-stack
      cards:
        - type: custom:button-card
          template: hc_header_card
          entity: weather.buienradar
        - type: custom:button-card
          template: hc_title_card
          name: "Welcome Home"
          label: "What are you up to"
```

--------------------------------

### Configure `hc_light_card` in Home Assistant

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_light_card.md

Example YAML configuration for integrating the `hc_light_card` into a Home Assistant dashboard, demonstrating how to specify the target light entity, assign a custom name, and enable the brightness slider.

```yaml
  - type: custom:button-card
    template: hc_light_card
    entity: <your light entity>]
    name: MyLight
    variables:
        enable_slider: True
```

--------------------------------

### Configuration Variables for `hc_light_card`

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_light_card.md

Detailed documentation of available variables for configuring the `hc_light_card`, including their types, default values, required status, and examples. These variables control the card's behavior and appearance.

```APIDOC
hc_light_card Variables:
  entity:
    Type: Home Assistant Entity
    Required: Yes
    Example: light.livingroom
    Description: The Home Assistant light entity to control.
  name:
    Type: String
    Default: friendly name
    Required: No
    Description: A custom name for the light card.
  enable_slider:
    Type: Boolean
    Default: False
    Required: No
    Description: Controls the visibility of the brightness slider.
  card_color:
    Type: CSS Variable/Color
    Default: var(--color-orange)
    Required: No
    Description: Sets the background color of the card.
```

--------------------------------

### Home Assistant Climate Card Usage Example

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_climate_card.md

Example YAML configuration for integrating the `hc_climate_card` into a Home Assistant dashboard. This snippet demonstrates how to define the card type, apply a template, and link it to a specific climate entity.

```yaml
  - type: custom:button-card
    template: hc_climate_card
    entity: <climate entity>
```

--------------------------------

### HaCasa Custom Template Folder Structure Example

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/development/template.md

Illustrates the recommended folder and file naming convention for custom templates within the `templates/custom_templates` directory, ensuring proper inclusion and organization. Each custom template requires a dedicated folder containing the YAML template file and a README.md.

```text
templates/custom_templates
└── hc_custom_temperature_card_damian
   └── hc_custom_temperature_card_damian.yaml
   └── readme.md
```

--------------------------------

### Example Usage of Glance Card in Home Assistant YAML

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_glance_card.md

This YAML snippet demonstrates how to integrate the `hc_glance_card` into a Home Assistant dashboard using `custom:button-card`. It shows the basic structure for adding the card and linking it to a sensor entity.

```yaml
  - type: custom:button-card
    template: hc_glance_card
    variables:
        entity1: <Your sensor>
```

--------------------------------

### Configure Navigation Bar Card in YAML

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_navigationbar_card.md

Example YAML configuration for the `hc_navigationbar_card` custom button card, demonstrating how to set icons, navigation paths, and associate entities for active state indication across multiple buttons. It highlights how to manage background colors for different views.

```yaml
  - type: custom:button-card
    template: hc_navigationbar_card
    variables:
      icon_color_1: white
      background_color_1: var(--primary-color)
      navigation_path_1: home
      icon_1: fapro:house
      navigation_path_2: climate
      icon_2: fapro:thermometer
      navigation_path_3: devices
      icon_3: fapro:plug
      entity_3: switch.all_switches
      navigation_path_4: media
      icon_4: fapro:music
      entity_4: 'media_player.all_media'
```

--------------------------------

### Configure HaCasa Security Navigation Card

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_navigation_card.md

Example YAML configuration for the `hc_navigation_card_security` template, designed for security-related navigation. It allows setting a title, security entity, and a dynamic color based on the alarm state, with a navigation tap action.

```yaml
  - type: custom:button-card
    template: hc_navigation_card_security
    name: <title of the card>
    entity: <security entity>
    variables: 
      color: var(--color-blue) # color of the card when the alarm is not off
    tap_action:
      action: navigate
      navigation_path: <navigation path>
```

--------------------------------

### Configure HaCasa Navigation Card

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_navigation_card.md

Example YAML configuration for the `hc_navigation_card` to navigate to specific dashboard pages. It includes options for setting a title, entity, icon, label prefix, and dynamic card/text/icon coloring based on entity state, along with a navigation tap action.

```yaml
  - type: custom:button-card
    template: hc_navigation_card
    name: <title of the card>
    entity: <entity for label>
    icon: <icon>
    variables: 
      label_prefix: 'On - ' # Prefix can by anything but the state of the entity will be added after it.
      color: var(--color-orange) # color of the card when the state underneath is met (in this case, higher then 0)
    state:
      - value: 0 # Can also be 'on'
        operator: '>' # if value above is 'on', remove this line
        styles:
          card:
            - background: "[[[ return variables.hc_color ]]]" # Let this be
          name:
            - color: white
          label:
            - color: white
          icon:
            - color: white
      - value: 0 # Can also be 'off'
        styles:
            icon:
              - color: <desired icon color> # color of the icon when the state is met (in this case, just 0)
    tap_action:
      action: navigate
      navigation_path: <navigation path>
```

--------------------------------

### Clone Your Forked HaCasa Repository

Source: https://github.com/damianeickhoff/hacasa/blob/main/CONTRIBUTING.md

Instructions to clone your forked HaCasa repository to your local machine using Git. Replace the placeholder URL with the actual URL of your forked repository and navigate into the cloned directory to begin development.

```bash
git clone https://github.com/damianeickhoff/HaCasa.git
cd YOUR_REPOSITORY
```

--------------------------------

### Load Home Assistant Frontend Themes

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/installation/configuration.md

This YAML snippet configures Home Assistant to load frontend themes from a specified directory. It should be added to the `configuration.yaml` file, typically under `default_config:`, to enable custom theme support.

```yaml
# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes
```

--------------------------------

### Verify HaCasa File Structure

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/installation/downloads.md

This snippet illustrates the expected directory and file structure for HaCasa within your Home Assistant configuration directory. It's crucial to ensure all files and folders are correctly placed as shown for the theme, cards, and dashboard to function properly.

```markdown
custom_icons/
├── house.svg
└── ...
dashboard/
└── hacasa/
    ├── templates/
    │   ├── internal_templates/
    │   │   └── example: hc_light_card.yaml
    │   ├── ...
    │   └── custom_templates
    ├── views/
    │   └── example: 00-default_view.yaml
    └── main.yaml
themes/
└── hacasa/
    ├── hacasa-gold.yaml
    └── hacasa-peachy.yaml
www/
└── images/
    ├── idle-media.gif
    └── weather/
        ├── sunny.svg
        └── bg-sunny.svg
configuration.yaml
```

--------------------------------

### Adding a Light Button Card to HaCasa View

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/first-page.md

This YAML code demonstrates how to add a `hc_light_card` to an existing HaCasa view. Users need to replace `<your light entity>` with their specific Home Assistant light entity. This card leverages HaCasa's templating system to display a light control button.

```YAML
     - type: custom:button-card
       template: hc_light_card
       entity: <your light entity>
```

--------------------------------

### Create a New Git Branch for Contributions

Source: https://github.com/damianeickhoff/hacasa/blob/main/CONTRIBUTING.md

Command to create a new local branch for your contribution. It is crucial to use a descriptive name, following conventions such as 'feature/your-new-feature' or 'bugfix/description-of-bug', to clearly indicate the purpose of your changes and facilitate review.

```bash
git checkout -b your-branch-name
```

--------------------------------

### Home Assistant Scene Card Configuration Variables

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_scene_card.md

This section details the required variables for configuring the `hc_scene_card` template in Home Assistant. Each scene (1 through 5) requires an icon, a scene entity, and a name that must match the corresponding option in the linked `input_select` entity.

```APIDOC
hc_scene_card Variables:
  icon_1:
    Default: ''
    Required: Yes
    Description: Icon for first item
  scene_1:
    Default: ''
    Required: Yes
    Description: Scene entity first item (scene.x)
  name_1:
    Default: ''
    Required: Yes
    Description: Name of first item, needs to be the same as name in input_selector
  icon_2:
    Default: ''
    Required: Yes
    Description: Icon for second item
  scene_2:
    Default: ''
    Required: Yes
    Description: Scene entity second item (scene.x)
  name_2:
    Default: ''
    Required: Yes
    Description: Name of second item, needs to be the same as name in input_selector
  icon_3:
    Default: ''
    Required: Yes
    Description: Icon for third item
  scene_3:
    Default: ''
    Required: Yes
    Description: Scene entity third item (scene.x)
  name_3:
    Default: ''
    Required: Yes
    Description: Name of third item, needs to be the same as name in input_selector
  icon_4:
    Default: ''
    Required: Yes
    Description: Icon for forth item
  scene_4:
    Default: ''
    Required: Yes
    Description: Scene entity forth item (scene.x)
  name_4:
    Default: ''
    Required: Yes
    Description: Name of forth item, needs to be the same as name in input_selector
  icon_5:
    Default: ''
    Required: Yes
    Description: Icon for fifth item
  scene_5:
    Default: ''
    Required: Yes
    Description: Scene entity fifth item (scene.x)
  name_5:
    Default: ''
    Required: Yes
    Description: Name of fifth item, needs to be the same as name in input_selector
```

--------------------------------

### Configure Lovelace Dashboard with YAML Mode and Resources

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/installation/configuration.md

This YAML configuration enables YAML mode for a new HaCasa dashboard within Home Assistant's Lovelace UI. It defines various resources (JavaScript modules and CSS) required for the dashboard's functionality and sets up the 'hacasa-dashboard' with a specific title, icon, and filename for its YAML definition.

```yaml
lovelace:
  mode: "storage"
  resources:
   - url: "/hacsfiles/button-card/button-card.js"
     type: "module"
   - url: "/hacsfiles/my-cards/my-cards.js"
     type: "module"
   - url: "/hacsfiles/kiosk-mode/kiosk-mode.js"
     type: module
   - url: "/hacsfiles/lovelace-card-mod/card-mod.js"
     type: module   
   - url: "/hacsfiles/mini-graph-card/mini-graph-card-bundle.js"
     type: module 
   - url: "/hacsfiles/lovelace-layout-card/layout-card.js"
     type: module        
   - url: "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900"
     type: css
  dashboards:
    hacasa-dashboard:
      mode: "yaml"
      title: HaCasa
      icon: fapro:house-fill
      show_in_sidebar: true
      filename: "dashboard/HaCasa/main.yaml"
```

--------------------------------

### Commit Changes with a Descriptive Message

Source: https://github.com/damianeickhoff/hacasa/blob/main/CONTRIBUTING.md

Commands to stage all modified files and commit them to your local branch. Adhere to the specified commit message guidelines: a concise subject line (max 50 characters, capitalized, no period) separated by a blank line from a body explaining the 'what', 'why', and 'how' of the change.

```bash
git add .
git commit -m "feat: Add user profile functionality"
```

--------------------------------

### Configuration Variables for hc_media_card

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_media_card.md

Defines the configurable variables for the `hc_media_card`, including their default values, whether they are required, and a description of their purpose.

```APIDOC
hc_media_card Variables:
  - show_background_art (boolean):
      Default: true
      Required: No
      Description: If true, the background will show the album art. If nothing is playing, an animated GIF will play.
  - background_color (string):
      Default: var(--color-purple)
      Required: No
      Description: The color will be used for the background if `hc_show_background_art` is `false`.
```

--------------------------------

### Configure Light Card with Entity

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/index.md

Demonstrates how to configure a HaCasa light card by specifying the Home Assistant entity ID using the `entity:` entry. This is a required entry for most cards.

```yaml
  - type: custom:button-card
    template: hc_light_card
    entity: light.livingroom
```

--------------------------------

### Configure Home Assistant Scene Card

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_scene_card.md

This YAML configuration defines a custom Home Assistant button-card using the `hc_scene_card` template. It requires an `input_select` entity to manage active scenes and currently supports exactly 5 scenes, each with an icon, name, and corresponding scene entity. The scene names must match the options in the `input_select`.

```yaml
  - type: custom:button-card
    template: hc_scene_card
    entity: input_select.scene_selector # Create this one yourself!
    variables:
      icon_1: fapro:house-fill
      name_1: Home
      scene_1: scene.home
      icon_2: fapro:computer
      name_2: Work
      scene_2: scene.work
      icon_3: fapro:door-open
      name_3: Away
      scene_3: scene.away
      icon_4: fapro:moon-stars
      name_4: Night
      scene_4: scene.night      
      icon_5: fapro:clapper-open
      name_5: Movie
      scene_5: scene.movie
```

--------------------------------

### Push Local Branch to Your Forked Repository

Source: https://github.com/damianeickhoff/hacasa/blob/main/CONTRIBUTING.md

Command to push your local branch, containing your committed changes, to your forked repository on GitHub. This action makes your changes available online, allowing you to submit a Pull Request for review by project maintainers.

```bash
git push origin your-branch-name
```

--------------------------------

### Configuration Variables for Home Assistant Switch Card

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_switch_card.md

This section details the available variables for customizing the `hc_switch_card` behavior and appearance, including options for power consumption display and graph visualization.

```APIDOC
hc_switch_card Configuration Variables:
  power_entity:
    Type: string (entity_id)
    Default: /
    Required: No
    Description: The entity that shows the power consumption.
  power_unit:
    Type: string
    Default: w
    Required: No
    Description: The unit that will be shown next to the power consumption.
  show_graph:
    Type: boolean
    Default: false
    Required: No
    Description: If true, a graph will be shown as background. NOTE: It will not show if there is no Power Entity given!
  graph_color:
    Type: string (color name or hex)
    Default: white
    Required: No
    Description: The color will be used for the graph. Line, fill or both.
  show_graph_line:
    Type: boolean
    Default: true
    Required: No
    Description: If true, a line will be shown in the graph.
  show_graph_fill:
    Type: boolean
    Default: false
    Required: No
    Description: If true, the graph will be filled.
```

--------------------------------

### YAML Configuration for hc_security_card

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_security_card.md

This YAML snippet illustrates how to integrate the `hc_security_card` into your Home Assistant Lovelace UI. It requires specifying the alarm entity and a security code for operation.

```yaml
  - type: custom:button-card
    template: hc_security_card
    entity: <your_alarm_entity>
    variables:
      hc_security_code: <your_code>
```

--------------------------------

### hc_security_card Configuration Variables Reference

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_security_card.md

This API documentation outlines the available variables for configuring the `hc_security_card`, detailing their purpose, requirement status, and default values.

```APIDOC
hc_security_code:
  Description: The code to arm or disarm the alarm
  Required: Yes
  Default: /
icon_color:
  Description: Color of the icon
  Required: No
  Default: var(--color-blue)
```

--------------------------------

### Customize Light Card Name

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/index.md

Shows how to override the default name of a light card by providing a custom name using the `name:` entry. This entry allows for more descriptive labeling within the UI.

```yaml
  - type: custom:button-card
    template: hc_light_card
    entity: light.livingroom
    name: My Awesome Light
```

--------------------------------

### YAML Configuration for Sensor Card Usage

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_sensor_card.md

This YAML snippet demonstrates how to integrate the `hc_sensor_card` into a Home Assistant configuration using `custom:button-card`. It requires specifying an `entity` which must be a sensor or binary sensor.

```yaml
  - type: custom:button-card
    template: hc_sensor_card
    entity: <sensor or binary sensor>
```

--------------------------------

### Home Assistant Weather Card View Configuration

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_weather_card.md

This YAML snippet demonstrates how to integrate the custom weather card into a Home Assistant Lovelace view. It uses `custom:button-card` with the `hc_weather_card` template and links it to the `sensor.weather_entity_forecast` created earlier. It also shows how to set variables like `show_forecast`.

```yaml
  - type: custom:button-card
    template: hc_weather_card
    entity: sensor.weather_entity_forecast
    variables:
      show_forecast: false
```

--------------------------------

### Climate Card Configuration Variables

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_climate_card.md

Detailed API documentation for the configurable variables of the `hc_climate_card`. This section outlines each variable's purpose, default value, and whether it is required, allowing customization of the card's appearance and functionality, such as displaying window state, mode, or a background graph.

```APIDOC
Variable: show_window_state
  Default: false
  Required: No
  Description: If true, the window state will be shown.
Variable: window_open_boolean
  Default: 
  Required: No
  Description: The entity that shows if the window is open.
Variable: show_mode_state
  Default: true
  Required: No
  Description: If true, the mode state will be shown as a icon next to the current temperature.
Variable: show_graph
  Default: false
  Required: No
  Description: If true, a graph will be shown as background.
Variable: graph_entity
  Default: 
  Required: No
  Description: The entity that will be shown in the graph.
Variable: graph_color
  Default: var(--color-red)
  Required: No
  Description: The color will be used for the graph.
```

--------------------------------

### Enable Slider on Light Card with Variables

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/index.md

Illustrates how to enable the slider functionality on a light card by setting the `enable_slider` variable to `true` within the `variables:` section. HaCasa variables allow for changing specific aspects of the card's behavior.

```yaml
  - type: custom:button-card
    template: hc_light_card
    entity: light.livingroom
    name: My Awesome Light
    variables:
      enable_slider: true
```

--------------------------------

### Navigation Bar Card Variables Reference

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_navigationbar_card.md

Defines the configurable variables for the `hc_navigationbar_card`, including icon colors, background colors, navigation paths, icons, associated entities, and active states for up to six buttons. Each variable is indexed (1-6) to correspond to a specific button.

```APIDOC
hc_navigationbar_card Variables:
- Variable: icon_color_1
  Default: var(--color-dark-gray)
  Required: No
  Description: Color of the first icon
- Variable: background_color_1
  Default: var(--color-light-gray-nav)
  Required: No
  Description: Background color of the first button
- Variable: navigation_path_1
  Default: ''
  Required: Yes
  Description: Navigation path for the first button
- Variable: icon_1
  Default: None
  Required: No
  Description: Icon for the first button
- Variable: entity_1
  Default: None
  Required: No
  Description: Entity for the first button
- Variable: active_state_1
  Default: 'on'
  Required: No
  Description: Active state for the first button
- Variable: icon_color_2
  Default: var(--color-dark-gray)
  Required: No
  Description: Color of the second icon
- Variable: background_color_2
  Default: var(--color-light-gray-nav)
  Required: No
  Description: Background color of the second button
- Variable: navigation_path_2
  Default: ''
  Required: No
  Description: Navigation path for the second button
- Variable: icon_2
  Default: None
  Required: No
  Description: Icon for the second button
- Variable: entity_2
  Default: None
  Required: No
  Description: Entity for the second button
- Variable: active_state_2
  Default: 'on'
  Required: No
  Description: Active state for the second button
- Variable: icon_color_3
  Default: var(--color-dark-gray)
  Required: No
  Description: Color of the third icon
- Variable: background_color_3
  Default: var(--color-light-gray-nav)
  Required: No
  Description: Background color of the third button
- Variable: navigation_path_3
  Default: ''
  Required: No
  Description: Navigation path for the third button
- Variable: icon_3
  Default: None
  Required: No
  Description: Icon for the third button
- Variable: entity_3
  Default: None
  Required: No
  Description: Entity for the third button
- Variable: active_state_3
  Default: 'on'
  Required: No
  Description: Active state for the third button
- Variable: icon_color_4
  Default: var(--color-dark-gray)
  Required: No
  Description: Color of the fourth icon
- Variable: background_color_4
  Default: var(--color-light-gray-nav)
  Required: No
  Description: Background color of the fourth button
- Variable: navigation_path_4
  Default: ''
  Required: No
  Description: Navigation path for the fourth button
- Variable: icon_4
  Default: None
  Required: No
  Description: Icon for the fourth button
- Variable: entity_4
  Default: ''
  Required: No
```

--------------------------------

### Basic Usage of Home Assistant Switch Card

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_switch_card.md

This snippet demonstrates how to integrate the `hc_switch_card` into your Home Assistant Lovelace UI using the `custom:button-card` template. Replace `<your switch entity>` with the actual entity ID of your switch.

```yaml
  - type: custom:button-card
    template: hc_switch_card
    entity: <your switch entity>
```

--------------------------------

### Variables for `hc_graph_card` Configuration

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_graph_card.md

Defines the configurable variables for the `hc_graph_card`, including their default values, requirement status, and descriptions.

```APIDOC
hc_graph_card Variables:
  color:
    type: string
    default: var(--color-red)
    required: No
    description: The color will be used for both the graph and the icon.
```

--------------------------------

### hc_glance_card Configuration Variables Reference

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_glance_card.md

This section details the configurable variables for the `hc_glance_card`. It lists parameters such as `entity1`, `entity2`, `entity3` for adding entities, and options to customize their icons and colors. It specifies default values, whether a variable is required, and its purpose.

```APIDOC
hc_glance_card Variables:
  entity1:
    Description: add the first entity to the card
    Required: Yes
    Default: /
  entity2:
    Description: add the second entity to the card
    Required: No
    Default: /
  entity3:
    Description: add the third entity to the card
    Required: No
    Default: /
  entity1_icon:
    Description: replace the icon for the first entity
    Required: No
    Default: Icon from entity itself
  entity2_icon:
    Description: replace the icon for the second entity
    Required: No
    Default: Icon from entity itself
  entity3_icon:
    Description: replace the icon for the third entity
    Required: No
    Default: Icon from entity itself
  entity1_icon_color:
    Description: The color of the first icon
    Required: No
    Default: var(--text)
  entity2_icon_color:
    Description: The color of the second icon
    Required: No
    Default: var(--text)
  entity3_icon_color:
    Description: The color of the third icon
    Required: No
    Default: var(--text)
```

--------------------------------

### Configure `hc_fan_card` Usage in Home Assistant

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_fan_card.md

This YAML snippet demonstrates how to integrate the `hc_fan_card` into a Home Assistant dashboard. It shows the basic structure for defining a custom button card, linking it to a fan entity, and enabling the oscillation button via variables.

```yaml
  - type: custom:button-card
    template: hc_fan_card
    entity: <fan entity>
    variables:
        enable_osc_btn: true
```

--------------------------------

### Fan Card Configuration Variables Reference

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_fan_card.md

This section details the available variables for customizing the `hc_fan_card`. It describes each variable's purpose, default value, and whether it is required for card functionality.

```APIDOC
Variables:
  enable_osc_btn:
    Default: false
    Required: No
    Description: If true, the oscillation button will be shown.
```

--------------------------------

### Configure `hc_title_card` for Home Assistant

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_title_card.md

This YAML snippet demonstrates how to configure the `hc_title_card` custom button card. It allows setting a `name` for the main title, a `label` for the subtitle, and `variables` to define up to three optional buttons, including their entities and display names.

```yaml
  - type: custom:button-card
    template: hc_title_card
    name: <title>
    label: <subtitle>
    variables:
      entity1: <entity>
      entity1_name: <entity name>
```

--------------------------------

### Header Card Configuration Variables Reference

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_header_card.md

This section details the available configuration variables for the `hc_header_card`, including their default values, whether they are required, and their purpose. These variables control the data displayed on the card, such as weather, air quality, and person presence.

```APIDOC
hc_header_card Variables:
  entity:
    Type: string
    Required: Yes
    Description: Needed for the weather condition.
  person_entity:
    Type: string
    Required: No
    Description: Needed for the person card.
  air_quality_sensor:
    Type: string
    Required: No
    Description: The entity for air quality.
```

--------------------------------

### Configure `hc_title_card_backbtn` for Home Assistant

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_title_card.md

This YAML snippet shows how to configure the `hc_title_card_backbtn` custom button card. It primarily uses the `name` parameter to set the title displayed on the card, which also includes a built-in back button.

```yaml
  - type: custom:button-card
    template: hc_title_card_backbtn
    name: The Climate
```

--------------------------------

### Theme Design Variables: Text Styles

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/development/theme.md

Specifies CSS variables for font sizes and weights, along with their corresponding values, to control text appearance. The Montserrat font is used globally.

```APIDOC
Font Size and Weight Variables:
- var(--font-size-primary): 14px
- var(--font-size-secondary): 12px
- var(--font-weight-primary): 700
- var(--font-weight-primary): 500
```

--------------------------------

### Theme Design Variables: Colors

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/development/theme.md

Defines the CSS variables available for customizing theme colors and their corresponding hexadecimal values. These variables should be used in templates for consistent color application.

```APIDOC
Color Variables:
- var(--primary-color): #ffa08a
- var(--color-green): #93d385
- var(--color-red): #f06767
- var(--color-blue): #67b0f0
- var(--color-yellow): #f0d467
- var(--color-purple): #b785d3
- var(--color-orange): #f0b467
- var(--color-gold): #ddae7b
- var(--icon-color) / var(--subtext-color): #cccfd9
- var(--primary-text-color): #48506f
```

--------------------------------

### Weather Card Configuration Variables

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_weather_card.md

This section describes the configurable variables for the Home Assistant weather card. These variables allow customization of the card's appearance and behavior, such as displaying forecast information or custom text in the corners.

```APIDOC
label_left:
  Default: returns date
  Required: No
  Description: text in left top corner
label_right:
  Default: 
  Required: No
  Description: text in right top corner
show_forecast:
  Default: true
  Required: No
  Description: shows or hides the forecast
```

--------------------------------

### Home Assistant Custom Weather Forecast Sensor Configuration

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_weather_card.md

This YAML configuration creates a custom Home Assistant sensor (`sensor.weather_entity_forecast`) that fetches daily weather forecast data. It uses a time pattern trigger (hourly) or an event trigger (`event_template_reloaded`) to update the forecast from a specified weather entity (e.g., `weather.home`). The sensor exposes various weather attributes like condition, temperature, wind speed, and a full forecast list.

```yaml
- trigger:
    - trigger: time_pattern
      hours: /1
    - trigger: event
      event_type: event_template_reloaded
  action:
    - action: weather.get_forecasts
      target:
        entity_id:
          - weather.home
      data:
        type: daily
      response_variable: dailyforecast
  sensor:

    - name: Weather Entity Forecast
      unique_id: weather_entity_forecast
      state: "{{ states('weather.home') }}"
      icon: mdi:hours-24
      attributes:
        condition: "{{ states('weather.home') }}"
        cloud_coverage: "{{ state_attr('weather.home','cloud_coverage') }}"
        temperature: "{{ state_attr('weather.home','temperature')  }}"
        wind_speed: "{{ state_attr('weather.home','wind_speed')  }}"
        wind_gust: "{{ state_attr('weather.home','wind_gust_speed')  }}"
        dew_point:  "{{ state_attr('weather.home','dew_point') }}"
        wind_bearing:  "{{ state_attr('weather.home','wind_bearing') }}"

        datetime: "{{ dailyforecast['weather.home'].forecast[0].datetime }}"
        forecast: "{{ dailyforecast['weather.home'].forecast }}"
```

--------------------------------

### HaCasa Navigation Card Configuration Variables

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_navigation_card.md

Defines the configurable variables for `hc_navigation_card` and `hc_navigation_card_security`, including `label_prefix` for text before the entity state, `color` for the card's background when the state is 'on', and `icon_color` for the icon when the state is 'off'.

```APIDOC
Variable:
  label_prefix:
    Default: 'On - '
    Required: No
    Description: Prefix can by anything but the state of the entity will be added after it.
  color:
    Default: var(--color-orange)
    Required: No
    Description: The color of the card when the state is on
  icon_color:
    Default: var(--text)
    Required: No
    Description: The color of the icon when the state is off
```

--------------------------------

### Configure Header Card in Home Assistant Dashboard

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_header_card.md

This YAML snippet demonstrates how to integrate the `hc_header_card` into a Home Assistant dashboard using `custom:button-card`. It requires a weather entity and optionally allows specifying sensors for air quality and a person entity to display additional information.

```yaml
  - type: custom:button-card
    template: hc_header_card
    entity: weather.buienradar
    variables:
      air_quality_sensor: sensor.<airqualitysensor>
      person_entity: person.<person>
```

--------------------------------

### HaCasa Custom Template YAML Structure

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/development/template.md

Defines the preferred YAML structure for HaCasa custom templates, outlining the standard sections such as `template`, `variables`, `actions`, `show_` properties, `entity`, `styles`, and `custom_fields`. It is crucial that the first line of the YAML file exactly matches the template's name.

```YAML
hc_custom_temperature_card_damian:
  template:
  variables:
  tap_action/hold action/...:
  triggers_update:
  show_icon:
  show_label:
  show_name:
  show_state:
  icon:
  label:
  name:
  state:
  entity:
  styles:
    icon:
    label:
    name:
    state:
    img_cell:
    grid:
    card:
  custom_fields:
    item1:
      card:
        type:
        template:
```

--------------------------------

### Remove HaCasa Dashboard Configuration

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/installation/uninstall.md

This YAML snippet shows the specific `hacasa-dashboard` entry that needs to be removed from your `configuration.yaml` file to uninstall the HaCasa dashboard.

```yaml
hacasa-dashboard:
  mode: "yaml"
  title: HaCasa
  icon: mdi:home
  show_in_sidebar: true
  filename: "dashboard/HaCasa/main.yaml"
```

--------------------------------

### Variables for `hc_title_card`

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/usage/cards/hc_title_card.md

This section details the optional variables available for the `hc_title_card` custom button card. These variables allow users to define up to three interactive buttons, specifying the entity to call and the display name for each button.

```APIDOC
Variables:
  entity1:
    Description: The entity to call when the first button is pressed
    Default: /
    Required: No
  entity2:
    Description: The entity to call when the second button is pressed
    Default: /
    Required: No
  entity3:
    Description: The entity to call when the third button is pressed
    Default: /
    Required: No
  entity1_name:
    Description: The name of the first button
    Default: /
    Required: No
  entity2_name:
    Description: The name of the second button
    Default: /
    Required: No
  entity3_name:
    Description: The name of the third button
    Default: /
    Required: No
```

--------------------------------

### Remove HaCasa Lovelace Dashboard Entry

Source: https://github.com/damianeickhoff/hacasa/blob/main/docs/docs/installation/uninstall.md

This YAML snippet illustrates how to remove the `hacasa-dashboard` entry from the `lovelace` section in `configuration.yaml`, particularly if you are removing the entire YAML-mode configuration for dashboards.

```yaml
lovelace:
  mode: "storage"
  resources:
    ...
  dashboards:
    hacasa-dashboard:
        mode: "yaml"
        title: HaCasa
        icon: mdi:home
        show_in_sidebar: true
        filename: "dashboard/HaCasa/main.yaml"
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.