type: vertical-stack
cards:
  - type: custom:config-template-card
    entities:
      - input_select.apex_span
    variables:
      span: states['input_select.apex_span'].state
    card:
      type: custom:apexcharts-card
      header:
        title: Electricity consumption and price history
        show: true
        show_states: true
      update_interval: 10min
      graph_span: ${span}
      apex_config:
        grid:
          show: true
        legend:
          show: false
        chart:
          height: 300px
          toolbar:
            show: true
        xaxis:
          axisBorder:
            show: false
          axisTicks:
            show: true
          tooltip:
            enabled: false
          tickPlacement: between
          crosshairs:
            show: true
          labels:
            style:
              fontSize: 11px
              fontWeight: 1400
            offsetX: -1
      experimental:
        color_threshold: true
      yaxis:
        - id: price_chart
          min: ~0
          apex_config:
            tickAmount: 10
            forceNiceScale: true
            title:
              text: Price (¢/kWh)
            labels:
              formatter: |
                EVAL:v => `¢ ${v.toFixed(2)}`
        - id: consumption
          min: 0
          opposite: true
          apex_config:
            tickAmount: 10
            forceNiceScale: true
            title:
              text: Consumption (kW)
            labels:
              formatter: |
                EVAL:v => `${v.toFixed(0)} kW`
      series:
        - entity: sensor.nordpool
          name: Price now
          show:
            in_header: false
          group_by:
            fill: last
          yaxis_id: price_chart
          type: area
          extend_to: now
          float_precision: 3
          stroke_width: 0.2
          opacity: 0.6
          fill_raw: "null"
          unit: ¢/kWh
          color: gold
          color_threshold:
            - value: -10
              color: dodgerblue
            - value: 0
              color: darkgreen
            - value: 5
              color: green
            - value: 10
              color: orange
            - value: 15
              color: red
            - value: 20
              color: darkred
            - value: 50
              color: black
        - entity: sensor.pro3em_total_active_power
          show:
            in_header: false
          name: Consumption now
          yaxis_id: consumption
          type: line
          stroke_width: 3
          opacity: 0.8
          curve: smooth
          group_by:
            func: median
            duration: 10min
          color: lightgrey
          extend_to: false
      show:
        last_updated: true
      view_layout:
        position: main
      card_mod:
        style: |
          ha-card {
            --ha-card-background: #101010;
            color: var(--primary-color);
          }
  - type: horizontal-stack
    cards:
      - type: entities
        entities:
          - input_select.apex_span
        card_mod:
          style: |
            ha-card {
              --ha-card-background: #101010;
              color: var(--primary-color);
            }
      - type: gauge
        entity: sensor.pro3em_phase_a_active_power
        unit: W
        min: 50
        needle: true
        severity:
          green: 0
          yellow: 2300
          red: 4600
        name: L1 Power
        max: 5750
        card_mod:
          style: |
            ha-card {
              --ha-card-background: #101010;
              color: var(--primary-color);
            }
      - type: gauge
        entity: sensor.pro3em_phase_b_active_power
        unit: W
        min: 50
        needle: true
        severity:
          green: 0
          yellow: 2300
          red: 4600
        name: L2 Power
        max: 5750
        card_mod:
          style: |
            ha-card {
              --ha-card-background: #101010;
              color: var(--primary-color);
            }
      - type: gauge
        entity: sensor.pro3em_phase_c_active_power
        unit: W
        min: 50
        needle: true
        severity:
          green: 0
          yellow: 2300
          red: 4600
        name: L3 Power
        max: 5750
        card_mod:
          style: |
            ha-card {
              --ha-card-background: #101010;
              color: var(--primary-color);
            }
      - type: gauge
        entity: sensor.pro3em_total_active_power
        needle: true
        unit: W
        min: 200
        max: 17250
        severity:
          green: 0
          yellow: 6900
          red: 13800
        name: Power Total
        card_mod:
          style: |
            ha-card {
              --ha-card-background: #101010;
              color: var(--primary-color);
            }