# Bubble Modules
#
# IMPORTANT: This file and its instructions are for YAML ONLY users. 
# If you are using the Bubble Card editor, you can find, install, create, 
# share and update modules right from the Module Store and the Module Editor.
#
# Modules created with the editor have a live preview and an integrated error console,
# so if you are a developer, you should take advantage of it for easier and faster development.
#
# How to use:
# 
# - To edit or add modules, first copy the "bubble-modules-example.yaml" file 
#   from "/www/community/Bubble-Card/" (if installed via HACS) 
#   to "/www/bubble/" (you'll need to create this folder).
#
#   Rename this file to "bubble-modules.yaml".
#
#   Then add these lines in your "configuration.yaml" under "homeassistant:":
#
#   homeassistant:
#     allowlist_external_dirs:
#       - /config/www/bubble
#       # This step is not needed if you already have this line:
#       - /config/www
#
#   Then save and restart Home Assistant.
#
# - After making changes, you need to refresh your page to apply the modifications.
# 
# - Styles and templates defined under "default:" are applied globally to all cards by default.
#
# - See the final example in this file for further details on how to create a module.
#
# - You can share/find modules here:
#   github.com/Clooos/Bubble-Card/discussions/categories/share-your-modules


default:
  name: Default
  description: Empty and enabled by default. Move your styles/templates here in the <code>bubble-modules.yaml</code> file to apply them to all cards.
  code: |
        /* CSS or JS templates (see examples below) */


home-assistant-default:
  name: Home Assistant default styling
  version: v1.7
  creator: Clooos
  supported:
    - button
    - calendar
    - climate
    - cover
    - horizontal-buttons-stack
    - media-player
    - pop-up
    - select
    - separator
  description: 'This module applies Home Assistant''s default styling to Bubble Card. Toggle "All cards" to enable it to all cards, or add <code>is_global: true</code> in that module in the <code>bubble-modules.yaml</code> file.'
  code: |-
    :host {
        --bubble-main-background-color: var(--ha-card-background, var(--card-background-color, #fff));
        --bubble-border-radius: var(--ha-card-border-radius, 12px);
        --bubble-icon-border-radius: 32px;
        --bubble-button-border-radius: var(--bubble-border-radius);
        --bubble-climate-button-background-color: var(--bubble-icon-background-color);
        --bubble-border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
        --bubble-secondary-background-color: transparent;
    }

    .bubble-container {
        -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
        backdrop-filter: var(--ha-card-backdrop-filter, none);
        box-shadow: var(--ha-card-box-shadow, none);
        box-sizing: border-box;
    }

    .bubble-icon-container, 
    .large .bubble-icon-container {
        --mdc-icon-size: 22px;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .large .bubble-cover-card-container > .bubble-buttons {
        --bubble-cover-main-background-color: none;
    }

    .bubble-range-fill {
        --bubble-accent-color: var(--bubble-button-accent-color);
    }

    .bubble-sub-button.background-on::before,
    .bubble-sub-button.background-off::before,
    .bubble-temperature-container::before,
    .bubble-icon-container::before {
        content: "";
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;  
        opacity: var(--control-number-buttons-background-opacity, .2);
        border-radius: var(--bubble-border-radius);
        background: var(--control-number-buttons-background-color, var(--disabled-color));
    }

    .is-on {
        --bubble-icon-background-color: var(--view-background,var(--lovelace-background,var(--primary-background-color)));
        transition: all ease-in 0.3s !important;
    }

    .bubble-icon-container::before {
        background: var(--state-inactive-color);
        border-radius: var(--bubble-icon-border-radius);
    }

    .bubble-sub-button {
        border: 0px solid transparent !important;
    }

    .bubble-select.bubble-wrapper {
        margin: 0 -2px;
    }

    .large .bubble-icon-container {
         margin-left: 9px;
    }

    .bubble-state {
        opacity: 1;
        font-weight: 400;
        font-size: 12px;
        letter-spacing: .4px;
    }

    :not(.bubble-separator) > .bubble-name {
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 0.1px;
    }

    .bubble-pop-up-background { 
        filter: brightness(0.96); /* Improve pop-up background contrast */
        --bubble-pop-up-border-radius: calc(var(--ha-card-border-radius, 12px) * 1.4);
    }

    .bubble-header-container {
        --bubble-secondary-background-color: var(--background-color-2); 
    }

    ha-select {
        --bubble-list-item-accent-color: none !important;
        --mdc-theme-surface: var(--card-background-color);
    }

    mwc-list-item[selected] {
        color: inherit !important;
        --mdc-ripple-press-opacity: 0 !important;
    }

    mwc-list-item[selected]::before {
        content: "";
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;  
        background-color: var(--primary-color);
        opacity: 0.24;
    }

    .bubble-range-slider,
    .bubble-button-container .bubble-background {
        border-radius: calc(var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2))) / 1.1);
    }


icon_container_color:
  name: 'Example: Customize the icon container color'
  version: v1.2
  creator: Clooos
  supported:
    - calendar
    - pop-up
    - cover
    - button
    - media-player
    - climate
    - select
  description: |
    A list of predefined colors to customize the icon container color.
    Configure this module via the editor or in YAML, for example:
    <br><br>
    <code-block><pre>
    icon_container_color: 
        color: light-blue
    </pre></code-block>
  code: |
    .bubble-icon-container,
    .bubble-day-chip {
      opacity: 1 !important;
      --bubble-icon-background-color: var(--${this.config.icon_container_color?.color}-color) !important;
    }
  editor:
    - name: color
      label: Color
      selector:
        ui_color:
          include_none: true


get_state_attribute:
    
  # Some informations about your module (this is shown in the editor)
  name: "Advanced example: Get state/attribute from other entities"
  version: "v1.3"
  creator: "Clooos"
  link: "https://github.com/Clooos/Bubble-Card"

  # Enable this module for supported "card_type" in the editor
  supported:
    - pop-up
    - cover
    - button
    - media-player
    - climate
    - select

  # The description have HTML support like in this example. This model is my favorite.
  description: |
    Get state/attribute from other entities and replace the default state/attribute field.
    <img class="example" src="https://github.com/Clooos/Bubble-Card/blob/main/img/get_state_template_example.png?raw=true" />
    Configure this module via the editor or in YAML, for example:
    <br><br>
    <code-block><pre>
    get_state_attribute:
      - entity: weather.home
      - entity: sensor.weather_station
        attribute: humidity
      - entity: sensor.weather_station
        attribute: temperature
    </pre></code-block>
    <br>
    <b>If it doesn't work, make sure at least one of "Show state" or "Show attribute" is turned on in your card configuration.</b>

  # Code blocks must always start with ${(() => { and end with })()}
  # Inline codes must always start with ${ and end with }
  #
  # This section only supports JavaScript and/or CSS
  code: |
    ${(() => {
      // Retrieve the configuration or use an empty array by default
      const config = this.config.get_state_attribute || [];

      // Format the retrieved value from the entity for each entry
      const values = config
        .map(cfg => {
          const entity = hass.states[cfg.entity];
          if (entity) {
            let rawValue;
            if (cfg.attribute) {
              rawValue = entity.attributes[cfg.attribute];
              if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
                return hass.formatEntityAttributeValue(entity, cfg.attribute);
              }
            } else {
              rawValue = entity.state;
              if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
                return hass.formatEntityState(entity);
              }
            }
          }
          return null;
        })
        // Remove null values and empty strings or strings with only spaces
        .filter(value => value !== null && value !== "" && value.trim() !== "");
    
      // Update the DOM element with the class 'bubble-state'
      // displaying values separated by ' • '
      card.querySelector('.bubble-state').innerText = values.join(' • ');
    })()}

  # This allows you to add a visual editor to your module. 
  # Learn about all available editor schema options in the editor schema documentation:
  # https://github.com/Clooos/Bubble-Card/blob/main/src/modules/editor-schema-docs.md
  editor:
    - type: expandable
      title: "Select entities and attributes"
      icon: "mdi:list-box-outline"
      schema:
        - name: '0'
          type: expandable
          title: "Entity 1"
          schema:
            - name: entity
              label: "Entity"
              selector:
                  entity: {}
            - name: attribute
              label: "Attribute"
              selector:
                  attribute: {}
        - name: '1'
          type: expandable
          title: "Entity 2"
          schema:
            - name: entity
              label: "Entity"
              selector:
                  entity: {}
            - name: attribute
              label: "Attribute"
              selector:
                  attribute: {}
        - name: '2'
          type: expandable
          title: "Entity 3"
          schema:
            - name: entity
              label: "Entity"
              selector:
                  entity: {}
            - name: attribute
              label: "Attribute"
              selector:
                  attribute: {}
        - name: '3'
          type: expandable
          title: "Entity 4"
          schema:
            - name: entity
              label: "Entity"
              selector:
                  entity: {}
            - name: attribute
              label: "Attribute"
              selector:
                  attribute: {}