type: sections
max_columns: 10
title: Family Calendar
path: family-calendar
sections:
  # --- HEADER SECTION (Date & Weather) ---
  - type: grid
    cards:
      - type: custom:better-moment-card
        parentStyle: |
          line-height:normal;
        moment:
          - parentStyle: |
              font-size:1em; text-align:center; margin-top:5px;
            templateRaw: |
              {{moment format=cccc}}
          - parentStyle: |
              font-size:1.5em; text-align:center; margin-top:5px;
            templateRaw: |
              {{moment format=LLLL dd, yyyy}}              
          - parentStyle: |
              font-size:4em;  text-align:center; font-weight:400;
            templateRaw: |
              {{moment format=HH:mm}} 
        grid_options:
          columns: 20
        card_mod:
          style: |
            ha-card {
              background: transparent !important;
              box-shadow: none !important;
              border: none !important;
            }
      - type: custom:weather-card
        entity: weather.home   # <--- UPDATE THIS ENTITY
        current: true
        details: true
        forecast: false
        grid_options:
          columns: 20
          rows: 3
      - type: weather-forecast
        show_current: false
        show_forecast: true
        entity: weather.home   # <--- UPDATE THIS ENTITY
        forecast_type: daily
        name: Weather Forecast
        grid_options:
          columns: 20
          rows: 3
        card_mod:
          style: |
            ha-card {
              background: transparent !important;
              box-shadow: none !important;
              border: none !important;
            }
    column_span: 10
    
  # --- CONTROLS SECTION (Buttons) ---
  - type: grid
    cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: " "
            card_mod:
              style: |
                ha-card { background: none; box-shadow: none; border: none; }
            grid_options:
              columns: 18
              rows: auto
        grid_options:
          columns: 120
          rows: auto
      - type: vertical-stack
        cards:
          - type: markdown
            content: <font color="Black" size="6">Family Calendar</font>
            grid_options:
              columns: 18
              rows: auto
        grid_options:
          columns: 120
          rows: auto
      - type: horizontal-stack
        cards:
          # --- BUTTONS (Update entities below) ---
          - type: custom:bubble-card
            card_type: button
            button_type: state
            entity: person.alice  # <--- UPDATE THIS ENTITY
            show_icon: true
            show_name: true
            tap_action:
              action: perform-action
              perform_action: script.alice_calendar_visible_filter
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${hass.states['input_text.alice_calendar_filter'].state === '.*' ? 'light-grey' : 'var(--alice-default-primary-color)'} !important;
              }
          - type: custom:bubble-card
            card_type: button
            button_type: state
            entity: person.bob    # <--- UPDATE THIS ENTITY
            show_icon: true
            show_name: true
            tap_action:
              action: perform-action
              perform_action: script.bob_calendar_visible_filter
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${hass.states['input_text.bob_calendar_filter'].state === '.*' ? 'light-grey' : 'var(--bob-default-primary-color)'} !important;
              }
          - type: custom:bubble-card
            card_type: button
            button_type: state
            entity: person.charlie  # <--- UPDATE THIS ENTITY
            show_icon: true
            show_name: true
            tap_action:
              action: perform-action
              perform_action: script.charlie_calendar_visible_filter
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${hass.states['input_text.charlie_calendar_filter'].state === '.*' ? 'light-grey' : 'var(--charlie-default-primary-color)'} !important;
              }
          - type: custom:bubble-card
            card_type: button
            button_type: state
            entity: person.daisy    # <--- UPDATE THIS ENTITY
            show_icon: true
            show_name: true
            tap_action:
              action: perform-action
              perform_action: script.daisy_calendar_visible_filter
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${hass.states['input_text.daisy_calendar_filter'].state === '.*' ? 'light-grey' : 'var(--daisy-default-primary-color)'} !important;
              }
          - type: custom:bubble-card
            card_type: button
            button_type: switch
            name: Family
            icon: mdi:human-male-female-child
            show_icon: true
            show_name: true
            tap_action:
              action: perform-action
              perform_action: script.family_calendar_visible_filter
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${hass.states['input_text.family_calendar_filter'].state === '.*' ? 'light-grey' : '#4A90E2'} !important;
              }
            entity: input_boolean.family_calendar_show
          - type: custom:bubble-card
            card_type: button
            button_type: name
            name: Birthdays
            icon: mdi:cake-variant
            show_icon: true
            show_name: true
            tap_action:
              action: perform-action
              perform_action: script.birthdays_calendar_visible_filter
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${hass.states['input_text.birthdays_calendar_filter'].state === '.*' ? 'light-grey' : '#33a02c'} !important;
              }
          - type: custom:bubble-card
            card_type: button
            button_type: name
            name: Holidays
            icon: mdi:bag-personal
            show_icon: true
            show_name: true
            tap_action:
              action: perform-action
              perform_action: script.holidays_calendar_visible_filter
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${hass.states['input_text.holidays_calendar_filter'].state === '.*' ? 'light-grey' : '#ff7f00'} !important;
              }
        grid_options:
          columns: 45
          rows: auto
      - type: markdown
        content: " "
        grid_options:
          columns: 3
          rows: auto
      - type: custom:bubble-card
        card_type: button
        button_type: name
        card_layout: large
        name: Add Event
        icon: mdi:calendar-plus
        tap_action:
          action: navigate
          navigation_path: "#addcalendarevent"
        styles: |
          * { font-size: 1.05em !important; }
          ha-card { --bubble-main-background-color: #393745 !important; width: 300px; }    
          .bubble-icon { --mdc-icon-size: 30px !important; color: snow !important; opacity: 1; }
          .bubble-icon-container { background: #393745 !important; display: flex; }
          .bubble-name { color: snow !important; opacity: 1; display: flex; line-height: 18px; flex-direction: row; justify-content: center; flex-grow: 1; margin: 0 40px 0 0; pointer-events: none; position: relative; overflow: hidden; }
        grid_options:
          columns: 10
          rows: 1
      - type: custom:bubble-card
        card_type: select
        entity: input_select.calendar_view
        show_name: true
        show_state: true
        name: Select View
        show_last_changed: false
        show_attribute: false
    column_span: 10
    
  # --- CALENDAR SECTION (Week Planner Card) ---
  - type: grid
    cards:
      - type: custom:config-template-card
        entities:
          - input_text.alice_calendar_filter
          - input_text.bob_calendar_filter
          - input_text.charlie_calendar_filter
          - input_text.daisy_calendar_filter
          - input_text.family_calendar_filter
          - input_text.holidays_calendar_filter
          - input_text.birthdays_calendar_filter
          - input_select.calendar_view
        variables:
          ALICAL: states['input_text.alice_calendar_filter']?.state
          BOBCAL: states['input_text.bob_calendar_filter']?.state
          CHACAL: states['input_text.charlie_calendar_filter']?.state
          DAICAL: states['input_text.daisy_calendar_filter']?.state
          FAMCAL: states['input_text.family_calendar_filter']?.state
          HOLCAL: states['input_text.holidays_calendar_filter']?.state
          BIRCAL: states['input_text.birthdays_calendar_filter']?.state
          VIEW: states['input_select.calendar_view']?.state
          DAYS: |
            (() => {
              const width = window.innerWidth;
              const calendarView = states['input_select.calendar_view']?.state;
              if (width >= 390 && width<= 500) return 1;
              if (calendarView === 'Today') return 1;
              if (calendarView === 'Tomorrow') return 2;
              if (calendarView === 'Bimonth' && width >= 1920) return 56;
              if (calendarView === 'Month' && width >= 1920) return 28;
              if (calendarView === 'Biweek' && width >= 1920) return 14;
              if (calendarView === 'Week' && width >= 1920) return 7;
              return 3;
            })()
        card:
          type: custom:week-planner-card
          calendars:
            # --- MAP CALENDARS HERE ---
            - entity: calendar.alice
              name: Alice
              color: "var(--alice-default-primary-color)"
              filter: ${ ALICAL }
            - entity: calendar.bob
              name: Bob
              color: "var(--bob-default-primary-color)"
              filter: ${ BOBCAL }
            - entity: calendar.charlie
              name: Charlie
              color: "var(--charlie-default-primary-color)"
              filter: ${ CHACAL }
            - entity: calendar.daisy
              name: Daisy
              color: "var(--daisy-default-primary-color)"
              filter: ${ DAICAL }
            - entity: calendar.family
              name: Family
              color: "var(--family-default-primary-color)"
              filter: ${ FAMCAL }
            - entity: calendar.birthdays
              name: Birthdays
              color: "var(--birthdays-default-primary-color)"
              filter: ${ BIRCAL }
            - entity: calendar.holidays # <--- Check this entity ID after adding integration
              name: Holidays
              color: "var(--holidays-default-primary-color)"
              filter: ${ HOLCAL }
          days: ${ DAYS }
          startingDayOffset: 0
          hideWeekend: false
          noCardBackground: false
          compact: false
          weather:
            showCondition: true
            showTemperature: true
            showLowTemperature: true
            useTwiceDaily: false
            entity: weather.home # <--- UPDATE THIS ENTITY
          locale: en
          showLocation: true
          hidePastEvents: false
          hideDaysWithoutEvents: false
          hideTodayWithoutEvents: false
          combineSimilarEvents: true
          showLegend: false
          legendToggle: false
          card_mod:
            style: |
              ha-card {
                background: rgba(255, 255, 255, 0.6) !important;
                border-radius: 24px;
                box-shadow: none;
                .event.past { opacity: .2; background-color: gray !important; }
                .time { color: #333333 !important; font-size: 0.8em !important; }
                .event { color: #333333 !important; line-height: 16px !important; background-color: var(--border-color) !important; border-radius: 10px !important; max-height: 80px !important; overflow: hidden !important; font-size: 1.1em !important; }
                .none { background-color: transparent !important; }
                .today .number { border-radius: 5px; background-color: orange !important; padding-left: 4px; padding-right: 4px; }
                .day .date .text { font-size: 1em !important; font-weight: bold !important; }
                .day .date .number { font-weight: bold !important; font-size: 3em !important; }
                .day { border: solid 1px whitesmoke; padding: 0.2%; width: 13% !important; }
              }    
        grid_options:
          columns: 120
          rows: 1
          showDescription: false
    column_span: 10
    
  # --- POPUP SECTION (Hidden) ---
  - type: grid
    cards:
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: "#addcalendarevent"
            button_type: name
            name: Add Calendar Event
            icon: mdi:calendar-plus
            show_icon: true
            show_name: true
            styles: |
              .bubble-button-card-container {
                background: 
                ${hass.states['input_select.calendar_select'].state == 'Alice' ? 'var(--alice-default-primary-color)' 
                : hass.states['input_select.calendar_select'].state == 'Bob' ? 'var(--bob-default-primary-color)' 
                : hass.states['input_select.calendar_select'].state == 'Charlie' ? 'var(--charlie-default-primary-color)' 
                : hass.states['input_select.calendar_select'].state == 'Daisy' ? 'var(--daisy-default-primary-color)' 
                : hass.states['input_select.calendar_select'].state == 'Family' ? 'var(--family-default-primary-color)' 
                : 'gray'} !important;
              }
          - type: vertical-stack
            cards:
              - type: entities
                entities:
                  - entity: input_select.calendar_select
                  - entity: input_text.calendar_event_title
                    name: Event Title
                  - entity: input_text.calendar_event_description
                    name: Event Description
                  - entity: input_boolean.calendar_all_day_event
                    name: All Day Event
                title: Add Calendar Event
                state_color: false
              - type: conditional
                conditions:
                  - entity: input_boolean.calendar_all_day_event
                    state: "off"
                card:
                  type: entities
                  entities:
                    - entity: input_datetime.calendar_event_start
                      name: Start Time
                    - entity: input_datetime.calendar_event_end
                      name: End Time
              - type: conditional
                conditions:
                  - entity: input_boolean.calendar_all_day_event
                    state: "on"
                card:
                  type: entities
                  entities:
                    - entity: input_datetime.calendar_day_event_start
                      name: Event Start Date
                    - entity: input_datetime.calendar_day_event_end
                      name: Event End Date
              - type: custom:button-card
                name: Add Event to Calendar
                tap_action:
                  action: call-service
                  service: script.add_google_calendar_event
                styles:
                  card:
                    - background-color: |
                        [[[
                          if (states['input_select.calendar_select'].state == 'Alice') return "var(--alice-default-primary-color)";
                          if (states['input_select.calendar_select'].state == 'Bob') return "var(--bob-default-primary-color)";
                          if (states['input_select.calendar_select'].state == 'Charlie') return "var(--charlie-default-primary-color)";
                          if (states['input_select.calendar_select'].state == 'Daisy') return "var(--daisy-default-primary-color)";
                          if (states['input_select.calendar_select'].state == 'Family') return "var(--family-default-primary-color)";
                          return "gray";
                        ]]]                
cards: []
icon: mdi:calendar-blank-multiple
background:
  opacity: 62
  alignment: center
  size: cover
  repeat: repeat
  attachment: fixed
  image: /local/your-background-image.jpg