title: Home
views:
  - path: default_view
    title: Home
    type: masonry
    cards:
      - type: weather-forecast
        entity: weather.forecast_casa
        show_forecast: true
        forecast_type: daily

      - type: thermostat
        entity: climate.ar
        features:
          - style: icons
            type: climate-hvac-modes
            hvac_modes:
              - "off"
              - heat
              - cool
              - dry
              - fan_only

      - type: custom:button-card
        entity: input_boolean.secar_roupas
        icon: mdi:hanger
        name: Secar roupas
        show_icon: true
        show_name: true
        show_state: false
        show_label: false
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        custom_fields:
          status: >
            [[[
              return entity.state === 'on' ? 'Secagem ativa' : 'Toque para iniciar';
            ]]]
          mode: >
            [[[
              return entity.state === 'on' ? 'Heat evapora, Cool/Dry drena' : 'Ar desligado ao parar';
            ]]]
        styles:
          card:
            - padding: 18px
            - border-radius: 22px
            - background: |
                [[[
                  return entity.state === 'on'
                    ? 'linear-gradient(135deg, rgba(255,184,108,0.24), rgba(80,250,123,0.10))'
                    : 'var(--ha-card-background, var(--card-background-color, #1c1c1c))';
                ]]]
            - box-shadow: none
          grid:
            - grid-template-areas: '"i n" "i status" "i mode"'
            - grid-template-columns: min-content 1fr
            - grid-template-rows: min-content min-content min-content
            - column-gap: 12px
            - row-gap: 4px
          img_cell:
            - justify-self: start
            - align-self: center
            - width: 42px
            - height: 42px
            - border-radius: 16px
            - background: rgba(255,255,255,0.10)
          icon:
            - color: |
                [[[
                  return entity.state === 'on' ? '#ffb86c' : '#8be9fd';
                ]]]
            - width: 24px
            - height: 24px
          name:
            - justify-self: start
            - align-self: end
            - color: white
            - font-size: 22px
            - font-weight: 700
          custom_fields:
            status:
              - justify-self: start
              - color: |
                  [[[
                    return entity.state === 'on' ? '#ffb86c' : 'rgba(248,250,252,0.82)';
                  ]]]
              - font-size: 15px
              - font-weight: 700
            mode:
              - justify-self: start
              - color: rgba(226,232,240,0.68)
              - font-size: 12px

      - type: custom:button-card
        entity: sensor.pixel_7a_battery_level
        icon: mdi:battery
        name: Bateria Pixel 7a
        show_icon: true
        show_name: true
        show_state: true
        show_label: false
        tap_action:
          action: none
        hold_action:
          action: none
        state_display: >
          [[[
            const value = Math.max(0, Math.min(100, Number(entity.state || 0)));
            return `${Math.round(value)}%`;
          ]]]
        custom_fields:
          bar: >
            [[[
              const value = Math.max(0, Math.min(100, Number(entity.state || 0)));
              let color = '#50fa7b';
              if (value < 20) color = '#ff5555';
              else if (value < 50) color = '#ffb86c';
              return `
                <div style="height:10px;background:rgba(255,255,255,0.12);border-radius:999px;overflow:hidden;">
                  <div style="height:100%;width:${value}%;background:${color};border-radius:999px;"></div>
                </div>
              `;
            ]]]
        styles:
          card:
            - padding: 18px
            - border-radius: 22px
            - background: var(--ha-card-background, var(--card-background-color, #1c1c1c))
            - box-shadow: none
          grid:
            - grid-template-areas: '"i n s" "bar bar bar"'
            - grid-template-columns: min-content 1fr min-content
            - grid-template-rows: min-content min-content
            - column-gap: 12px
            - row-gap: 12px
          img_cell:
            - justify-self: start
            - align-self: center
            - width: 34px
            - height: 34px
          icon:
            - color: "#50fa7b"
            - width: 24px
            - height: 24px
          name:
            - justify-self: start
            - align-self: center
            - color: white
            - font-size: 22px
            - font-weight: 600
          state:
            - justify-self: end
            - align-self: center
            - color: white
            - font-size: 18px
            - font-weight: 700
          custom_fields:
            bar:
              - margin-top: 2px

      - type: custom:button-card
        entity: sensor.codex_5h_left
        triggers_update:
          - sensor.codex_5h_reset_formatted
          - sensor.codex_weekly_left
          - sensor.codex_weekly_reset_formatted
        icon: mdi:console-line
        name: Uso do Codex
        show_icon: true
        show_name: true
        show_state: false
        show_label: false
        tap_action:
          action: none
        hold_action:
          action: none
        custom_fields:
          fiveh: >
            [[[
              const value = Math.max(0, Math.min(100, Number(states['sensor.codex_5h_left']?.state || 0)));
              const reset = states['sensor.codex_5h_reset_formatted']?.state || 'indisponível';
              let color = '#50fa7b';
              if (value < 20) color = '#ff5555';
              else if (value < 50) color = '#ffb86c';
              return `
                <div style="display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px;">
                  <span style="color:rgba(248,250,252,0.88);font-size:14px;font-weight:600;">Janela de 5h</span>
                  <span style="color:#ffffff;font-size:16px;font-weight:700;">${Math.round(value)}%</span>
                </div>
                <div style="height:10px;background:rgba(255,255,255,0.12);border-radius:999px;overflow:hidden;">
                  <div style="height:100%;width:${value}%;background:${color};border-radius:999px;"></div>
                </div>
                <div style="margin-top:6px;color:rgba(226,232,240,0.72);font-size:12px;">Reinicia em ${reset}</div>
              `;
            ]]]
          weekly: >
            [[[
              const value = Math.max(0, Math.min(100, Number(states['sensor.codex_weekly_left']?.state || 0)));
              const reset = states['sensor.codex_weekly_reset_formatted']?.state || 'indisponível';
              let color = '#8be9fd';
              if (value < 30) color = '#ff5555';
              else if (value < 65) color = '#ffb86c';
              return `
                <div style="display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px;">
                  <span style="color:rgba(248,250,252,0.88);font-size:14px;font-weight:600;">Limite semanal</span>
                  <span style="color:#ffffff;font-size:16px;font-weight:700;">${Math.round(value)}%</span>
                </div>
                <div style="height:10px;background:rgba(255,255,255,0.12);border-radius:999px;overflow:hidden;">
                  <div style="height:100%;width:${value}%;background:${color};border-radius:999px;"></div>
                </div>
                <div style="margin-top:6px;color:rgba(226,232,240,0.72);font-size:12px;">Reinicia em ${reset}</div>
              `;
            ]]]
        styles:
          card:
            - padding: 18px
            - border-radius: 22px
            - background: var(--ha-card-background, var(--card-background-color, #1c1c1c))
            - box-shadow: none
          grid:
            - grid-template-areas: '"i n" "fiveh fiveh" "weekly weekly"'
            - grid-template-columns: min-content 1fr
            - grid-template-rows: min-content min-content min-content
            - column-gap: 12px
            - row-gap: 14px
          img_cell:
            - justify-self: start
            - align-self: center
            - width: 34px
            - height: 34px
          icon:
            - color: "#8be9fd"
            - width: 24px
            - height: 24px
          name:
            - justify-self: start
            - align-self: center
            - color: white
            - font-size: 22px
            - font-weight: 600
          custom_fields:
            fiveh:
              - margin-top: 4px
            weekly:
              - margin-top: 2px

      - type: custom:button-card
        entity: sensor.claude_5h_left
        triggers_update:
          - sensor.claude_5h_reset_formatted
          - sensor.claude_7d_left
          - sensor.claude_7d_reset_formatted
        icon: mdi:brain
        name: Uso do Claude
        show_icon: true
        show_name: true
        show_state: false
        show_label: false
        tap_action:
          action: none
        hold_action:
          action: none
        custom_fields:
          fiveh: >
            [[[
              const value = Math.max(0, Math.min(100, Number(states['sensor.claude_5h_left']?.state || 0)));
              const reset = states['sensor.claude_5h_reset_formatted']?.state || 'indisponível';
              let color = '#50fa7b';
              if (value < 20) color = '#ff5555';
              else if (value < 50) color = '#ffb86c';
              return `
                <div style="display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px;">
                  <span style="color:rgba(248,250,252,0.88);font-size:14px;font-weight:600;">Janela de 5h</span>
                  <span style="color:#ffffff;font-size:16px;font-weight:700;">${Math.round(value)}%</span>
                </div>
                <div style="height:10px;background:rgba(255,255,255,0.12);border-radius:999px;overflow:hidden;">
                  <div style="height:100%;width:${value}%;background:${color};border-radius:999px;"></div>
                </div>
                <div style="margin-top:6px;color:rgba(226,232,240,0.72);font-size:12px;">Reinicia em ${reset}</div>
              `;
            ]]]
          sevenday: >
            [[[
              const value = Math.max(0, Math.min(100, Number(states['sensor.claude_7d_left']?.state || 0)));
              const reset = states['sensor.claude_7d_reset_formatted']?.state || 'indisponível';
              let color = '#8be9fd';
              if (value < 30) color = '#ff5555';
              else if (value < 65) color = '#ffb86c';
              return `
                <div style="display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px;">
                  <span style="color:rgba(248,250,252,0.88);font-size:14px;font-weight:600;">Limite de 7 dias</span>
                  <span style="color:#ffffff;font-size:16px;font-weight:700;">${Math.round(value)}%</span>
                </div>
                <div style="height:10px;background:rgba(255,255,255,0.12);border-radius:999px;overflow:hidden;">
                  <div style="height:100%;width:${value}%;background:${color};border-radius:999px;"></div>
                </div>
                <div style="margin-top:6px;color:rgba(226,232,240,0.72);font-size:12px;">Reinicia em ${reset}</div>
              `;
            ]]]
        styles:
          card:
            - padding: 18px
            - border-radius: 22px
            - background: var(--ha-card-background, var(--card-background-color, #1c1c1c))
            - box-shadow: none
          grid:
            - grid-template-areas: '"i n" "fiveh fiveh" "sevenday sevenday"'
            - grid-template-columns: min-content 1fr
            - grid-template-rows: min-content min-content min-content
            - column-gap: 12px
            - row-gap: 14px
          img_cell:
            - justify-self: start
            - align-self: center
            - width: 34px
            - height: 34px
          icon:
            - color: "#ffb86c"
            - width: 24px
            - height: 24px
          name:
            - justify-self: start
            - align-self: center
            - color: white
            - font-size: 22px
            - font-weight: 600
          custom_fields:
            fiveh:
              - margin-top: 4px
            sevenday:
              - margin-top: 2px