views:
  - title: Home
sidebar:
  date: true
  digitalClock: true
  digitalClockWithSeconds: true
  sidebarMenu:
    - action: navigate
      active: true
      name: Startseite
      icon: null
      navigation_path: 
    - action: navigate
      active: true
      name: Erdgeschoss
      navigation_path: 
    - action: navigate
      active: true
      name: Obergeschoss
      icon: null
      navigation_path: 
    - action: navigate
      active: true
      name: Dachboden
      icon: null
      navigation_path: 
    - action: navigate
      active: true
      name: Keller
      icon: null
      navigation_path: 
    - action: navigate
      active: true
      name: Garten
      icon: null
      navigation_path: 
    - action: navigate
      active: true
      name: Kamera
      icon: null
      navigation_path:
    - action: navigate
      active: true
      name: Einstellung
      icon: null
      navigation_path: 
  template: |
    <li>
      {% if "Vandaag" in states('sensor.hausmuell') %}
        <li>Hausmüll ist heute</li>
      {% endif %}

      {% if "Vandaag" in states('sensor.gelbetonne') %}
        <li>Gelbetonne ist heute</li>
      {% endif %}

      {% if "Vandaag" in states('sensor.altpapier') %}
        <li>Altpapier ist heute</li>
      {% endif %}

      {% if "Vandaag" in states('sensor.biotonne') %}
        <li>Biotonne ist heute</li>
      {% endif %}
    </li>
  bottomCard:
    type: custom:vertical-stack-in-card
    card_mod:
      style: |
        ha-card {
          border: none;
          background: transparent;
        }
    cardOptions:
      cards:
        - type: weather-forecast
          entity: weather.forecast_homeassistant
          forecast_type: daily
          card_mod:
            style: |
              ha-card {
                background: transparent;
              }      
    cardStyle: |
      :host {
        width: 100%;
      }
      ha-card {
        border: none;
        background: transparent;
      }
  width:
    desktop: 20
    mobile: 0
    tablet: 25
  theme: Caule Light Green
  style: |
    :host {
      --sidebar-background: #242e42 !important;
      --face-color: #333;
      --face-border-color: #EEE;
      --clock-hands-color: #FFF;
      --clock-seconds-hand-color: #FF4B3E;
      --clock-middle-background: #242e42 !important;
      --clock-middle-border: #EEE;
    }

    ha-icon {
        --mdc-icon-size: 18px;
    }

    #customSidebar {
        z-index: 9999 !important;
    }

    .sidebarMenu li {
        color: var(--sidebar-text-color, #8BC34A);  # Light Green text color for sidebar items
        position: relative;
        padding: 10px 20px;
        border-radius: 12px;
        font-size: 18px !important;
        line-height: 14px !important;
        font-weight: 300;
        white-space: normal;
        display: block;
        cursor: pointer;
        margin-bottom: -3px;
    }

    .sidebarMenu li.active {
        background-color: var(--primary-color) !important;
        border-radius: 0px !important;
        color: var(--primary-text-color) !important;
        font-weight: bold !important;
    }

    .sidebarMenu li.active ha-icon {
        color: var(--primary-text-color) !important;
    }

    .digitalClock {
        font-size: 35px !important;
        line-height: 60px !important;
        font-weight: 450 !important;
        cursor: default;
        text-align: center;
        margin-bottom: 1px;
    }

    .date {
        padding-bottom: 0px;
        font-size: 20px;
        font-weight: 350;
        text-align: center;
    }

    .template li {
        color: var(--sidebar-text-color, #8BC34A);  # Light Green text for the template list items
        font-size: 1.1vw !important;
        font-weight: 200 !important;
        opacity: 0.6;
        letter-spacing: -0.05vw !important;
        text-align: center;
        margin-bottom: 10px !important;
    }