title: Madplan
path: madplan
icon: mdi:chef-hat

cards:

  # 🍽️ Dagens ret - stort fremhævet kort med link til Mealie
  - type: custom:button-card
    entity: sensor.dagens_aftensmad
    show_icon: true
    show_name: true
    show_state: true
    icon: mdi:food-variant
    name: I dag
    tap_action:
      action: url
      url_path: >
        [[[
          var slug = states['sensor.dagens_aftensmad_slug'].state;
          if (slug && slug !== '' && slug !== 'unknown') {
            return 'http://anneclaus.dk:9925/g/home/r/' + slug;
          }
          return 'http://anneclaus.dk:9925';
        ]]]
    styles:
      card:
        - padding: 16px
        - background: var(--primary-color)
        - border-radius: 12px
      icon:
        - color: white
        - width: 40px
      name:
        - font-size: 13px
        - color: "rgba(255,255,255,0.7)"
        - text-transform: uppercase
        - letter-spacing: 1px
      state:
        - font-size: 22px
        - font-weight: bold
        - color: white
        - padding-top: 4px

  # 🎵 Musik i køkken + Der er mad
  - type: grid
    columns: 2
    square: false
    cards:
      - type: button
        name: Musik i køkken
        icon: mdi:music-note-outline
        tap_action:
          action: call-service
          service: media_player.select_source
          target:
            entity_id: media_player.kokken
          data:
            source: "1 Family Mix"

      - type: button
        name: Der er mad!
        icon: mdi:silverware-fork-knife
        tap_action:
          action: call-service
          service: script.mad_announcement

  # 📅 Ugens madplan
  - type: entities
    title: Ugens madplan
    show_header_toggle: false
    entities:
      - type: custom:button-card
        entity: sensor.mealie_madplan_ugen
        show_icon: false
        show_name: false
        show_state: false
        styles:
          card:
            - padding: 0
            - background: none
            - box-shadow: none
        custom_fields:
          week: >
            [[[
              const items = entity.attributes.items || [];
              const dayNames = ['Søndag','Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'];
              const today = new Date().toISOString().slice(0,10);

              // Build date->meal map
              const meals = {};
              items.forEach(item => {
                if (item.recipe && item.recipe.name) {
                  meals[item.date] = {
                    name: item.recipe.name,
                    slug: item.recipe.slug || ''
                  };
                }
              });

              // Generate 7 days starting from Monday of current week
              const now = new Date();
              const dayOfWeek = now.getDay();
              const monday = new Date(now);
              monday.setDate(now.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));

              let html = '<div style="width:100%">';
              for (let i = 0; i < 7; i++) {
                const d = new Date(monday);
                d.setDate(monday.getDate() + i);
                const dateStr = d.toISOString().slice(0,10);
                const dayName = dayNames[d.getDay()];
                const meal = meals[dateStr];
                const isToday = dateStr === today;

                const bg = isToday ? 'var(--primary-color)' : 'transparent';
                const textColor = isToday ? 'white' : 'var(--primary-text-color)';
                const dayColor = isToday ? 'rgba(255,255,255,0.7)' : 'var(--secondary-text-color)';
                const weight = isToday ? 'bold' : 'normal';
                const radius = isToday ? '8px' : '0';
                const border = isToday ? 'none' : '1px solid var(--divider-color)';

                const mealName = meal ? meal.name : '—';
                const slug = meal ? meal.slug : '';
                const link = slug ? 'http://anneclaus.dk:9925/g/home/r/' + slug : '';
                const cursor = slug ? 'pointer' : 'default';

                html += `
                  <div style="display:flex; align-items:center; padding:10px 12px;
                              background:${bg}; border-radius:${radius};
                              border-bottom:${border}; cursor:${cursor}"
                       ${slug ? `onclick="window.open('${link}','_blank')"` : ''}>
                    <div style="width:70px; font-size:12px; color:${dayColor};
                                text-transform:uppercase; font-weight:600">
                      ${dayName}
                    </div>
                    <div style="flex:1; font-size:15px; color:${textColor};
                                font-weight:${weight}">
                      ${mealName}
                    </div>
                  </div>`;
              }
              html += '</div>';
              return html;
            ]]]
        extra_styles: |
          #week {
            width: 100%;
          }