views:
  - title: Home
    sections:
      - type: grid
        cards:
          - square: false
            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}} 
                card_mod:
                  style: |
                    ha-card {
                      background: transparent !important;
                      box-shadow: none !important;
                      border: none !important;
                    }
              - type: custom:weather-card
                entity: weather.forecast_home
                current: true
                details: true
                forecast: false
              - type: weather-forecast
                entity: weather.forecast_home
                show_current: false
                show_forecast: true
                forecast_type: daily
                name: Weather Forecast
                card_mod:
                  style: |
                    ha-card {
                      background: transparent !important;
                      box-shadow: none !important;
                      border: none !important;
                    }
            grid_options:
              columns: full
        column_span: 4
      - type: grid
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: person.brian
                scrolling_effect: false
                show_icon: true
                show_name: true
                show_state: false
                tap_action:
                  action: perform-action
                  perform_action: script.brian_calendar_visible_filter
                  target: {}
                button_action:
                  tap_action:
                    action: perform-action
                    perform_action: script.brian_calendar_visible_filter
                    target: {}
                styles: |
                  .bubble-button-background {
                    opacity: 1 !important;
                    background-color: ${hass.states['input_text.brian_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 208, 184, 0.3)'} !important;}
                  }    
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: person.brian
                name: Dogs
                scrolling_effect: false
                show_icon: true
                show_name: true
                show_state: false
                tap_action:
                  action: perform-action
                  perform_action: script.dog_calendar_visible_filter
                  target: {}
                button_action:
                  tap_action:
                    action: perform-action
                    perform_action: script.dog_calendar_visible_filter
                    target: {}
                styles: |
                  .bubble-button-background {
                    opacity: 1 !important;
                    background-color: ${hass.states['input_text.dog_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 100, 255, 0.5)'} !important;}
                  }    
              - 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'
                button_action:
                  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;
                  }
              - 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
            grid_options:
              columns: full
          - type: custom:config-template-card
            entities:
              - input_text.brian_calendar_filter
              - input_text.dog_calendar_filter
              - inpup_select.calendar_view
            variables:
              PERSONCAL: states['input_text.brian_calendar_filter']?.state
              DOGCAL: states['input_text.dog_calendar_filter']?.state
              VIEW: states['input_select.calendar_view']?.state
              DAYS: |
                (() => {
                  const calendarView = states['input_select.calendar_view']?.state;

                  if (calendarView === 'Today') return 1;
                  if (calendarView === 'Tomorrow') return 2;

                  // Check for Month, Biweek, or Week based on screen width
                  if (calendarView === 'Week') return 7;
                  if (calendarView === 'Biweek') return 14;
                  if (calendarView === 'Month') return 28;
                  if (calendarView === 'Bimonth') return 56;

                  // Default fallback to 7 if no condition matches
                  return 31;
                })()
            #### OPTION TO MAKE 1 MONTH VIEW 31 DAYS ####
            card:
              type: custom:week-planner-card
              calendars:
                - entity: calendar.personal
                  name: brian
                  color: rgba(15, 208, 184, 0.3)
                  filter: ${ PERSONCAL }
                - entity: calendar.dogs
                  name: dogs
                  color: rgba(15, 100, 255, 0.5)
                  filter: ${ DOGCAL }
              days: ${ DAYS }
              startingDayOffset: 0
              startingDay: month
              hideWeekend: false
              noCardBackground: false
              compact: false
              weather:
                showCondition: true
                showTemperature: true
                showLowTemperature: true
                useTwiceDaily: false
                entity: weather.forecast_home
              locale: en
              timeFormat: hh:mm
              showLocation: false
              hidePastEvents: false
              hideDaysWithoutEvents: false
              hideTodayWithoutEvents: false
              combineSimilarEvents: true
              showLegend: false
              legendToggle: false
              texts:
                monday: Mon
                tuesday: Tue
                wednesday: Wed
                thursday: Thu
                friday: Fri
                saturday: Sat
                sunday: Sun
                yesterday: ''
                today: ''
                tomorrow: ''
                overmorrow: ''
                fullDay: ''
                noEvents: ''
              card_mod:
                style: |
                  ha-card {
                    #font-family: 'Ovo';
                    .container .navigation .data-year {
                        position: static;
                        right: 60px;
                    }
                    .event.past {
                      opacity: .2;
                      background-color: gray !important;
                    }
                    .container .data-week {
                     display: none !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: 100px !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;        
                    }
                    #.today {
                    #  border: solid 2px #000000 !important;
                    #}
                    .day .date .text {
                      font-size: 1em !important;
                      font-weight: bold !important;
                    }
                    .day .date .number {
                      font-weight: bold !important;
                      font-size: 3em !important;
                    }
                    .day {
                      border-radius: 5px;
                      --background-color: red;
                      border: solid 1px whitesmoke;
                      display: flex !important;
                      flex-direction: column !important;
                      justify-content: flex-start !important;
                      align-items: stretch !important;
                      min-height: 15px !important;
                      width: 100% !important;
                      padding: 0 !important;
                      overflow: hidden !important;
                    }
                    .day .event {
                      white-space: normal !important;
                      word-break: break-word !important;
                    }
                    .container {
                      display: grid !important;
                      grid-template-columns: repeat(7, 1fr) !important;
                      grid-template-rows: auto !important;
                      gap: 8px !important;
                      padding: 0px !important;
                    }

                    .container .header,
                    .container .legend {
                      grid-column: 1 / -1 !important;   /* span full width */
                      grid-row: 1 !important;
                      justify-content: center !important;
                    }

                    .navigation {
                      display: flex !important;
                      flex-direction: row !important;
                      align-items: center !important;
                      margin-bottom: 0px !important;
                      text-align: center !important;
                    }
                    
                    .navigation .month {
                      color: transparent !important;       /* hide original text */
                      position: relative !important;
                      white-space: nowrap !important;
                      align-items: center !important;
                    }
                    
                    .navigation .month::after {
                      content: "November 🦃" !important;  /* new text */
                      color: #000000 !important;           /* your desired color */
                      position: absolute !important;
                      white-space: nowrap !important;
                      left: 0;
                      top: 0;
                      padding-right: 4px;
                    }
                    
                    /* Reorder days so Sunday is first column */
                    .day[data-weekday="1"] { grid-column: 2 !important; } /* Monday */
                    .day[data-weekday="2"] { grid-column: 3 !important; } /* Tuesday */
                    .day[data-weekday="3"] { grid-column: 4 !important; } /* Wednesday */
                    .day[data-weekday="4"] { grid-column: 5 !important; } /* Thursday */
                    .day[data-weekday="5"] { grid-column: 6 !important; } /* Friday */
                    .day[data-weekday="6"] { grid-column: 7 !important; } /* Saturday */
                    .day[data-weekday="7"] { grid-column: 1 !important; } /* Sunday */
                    }
                    .week.past-week {
                      display: none !important;
                    }
            grid_options:
              columns: full
          - 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
                scrolling_effect: false
                show_icon: true
                show_name: true
                styles: |
                  .bubble-button-card-container {
                    background: 
                    ${hass.states['input_select.calendar_select'].state == 
                    'brian' ? 'rgba(15, 208, 184, 0.3)'
                    : hass.states['input_select.calendar_select'].state == 
                    'dogs' ? 'rgba(15, 100, 255, 0.5)' 
                    : hass.states['input_select.calendar_select'].state == 
                    'Birthdays' ? '#000000' 
                    : 'red'} !important;
                  }
                modules: []
              - 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_calendar_event
                    styles:
                      card:
                        - background-color: |
                            [[[
                              if (states['input_select.calendar_select'].state == 'brian')
                                return "rgba(15, 208, 184, 0.3)";
                              if (states['input_select.calendar_select'].state == 'dogs')
                                return "rgba(15, 100, 255, 0.5)";
                              if (states['input_select.calendar_select'].state == 'Birthdays')
                                return "#33a02c";
                              return "gray";
                            ]]]  
        column_span: 4
    header:
      layout: center
      badges_position: bottom
      badges_wrap: scroll