type: custom:button-card
entity: person.daniel
aspect_ratio: 1.1/1.02
name: Person
show_entity_picture: true
show_name: false
tap_action:
  action: call-service
  service: script.find_xiaomi_k20
styles:
  card:
    - background-color: rgba(15,15,18,0.4)
    - border-radius: 5%
    - padding: 5%
    - font-size: 10px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
    - justify-self: end
    - align-self: middle
  grid:
    - grid-template-areas: '"icon icon" "n n" "battery status"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  name:
    - font-size: 15px
    - align-self: middle
    - justify-self: start
    - padding-bottom: 10px
  custom_fields:
    icon:
      - clip-path: circle()
      - width: 80%
      - pointer-events: none
      - display: grid
      - border: 5px solid
      - border-color: |-
          [[[
            if (states['binary_sensor.uptimekuma_dani_telefon'].state =='off') {
            return "#888888";
            } else {
            return "#00CC66";}
          ]]]
      - border-radius: 500px
      - margin: 0 +7% 0 0
      - justify-self: end
      - opacity: |-
          [[[
            if (states['binary_sensor.uptimekuma_dani_telefon'].state =='off') {
            return 0.5;
            } else {
            return 1;}
          ]]]
    status:
      - justify-self: end
      - color: white
      - margin-bottom: '-5px'
      - font-size: 15px
    battery:
      - margin-bottom: '-5px'
      - align-self: middle
      - justify-self: start
      - font-size: 15px
      - color: white
      - '--text-color-sensor': >-
          [[[ if (states["sensor.redmi_k20_pro_battery_level"].state < 20)
          return "#EF4F1A"; ]]]
custom_fields:
  icon: >
    [[[ return entity === undefined ? null : `<img
    src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
    ]]]
  status: |
    [[[
      if (states['binary_sensor.uptimekuma_dani_telefon'].state =='off') {
      return `<ha-icon icon="mdi:home-export-outline"
        style="width: 26px; height: 26px; margin: 0 5px 0 0; color: '#888888';">
        </ha-icon><span>Távol</span>`;
      }
      if (states['binary_sensor.uptimekuma_dani_telefon'].state =='on') {
      return `<ha-icon
        icon="mdi:home"
        style="width: 26px; height: 26px; margin: 0 5px 0 0; color: 888888;">
        </ha-icon><span>Itthon</span>`;
      } else {
      return `<ha-icon
        icon="mdi:map-marker-radius"
        style="width: 26px; height: 26px; margin: 0 5px 0 0; color: 888888;">
        </ha-icon><span>Ismeretlen</span>`;
      }
    ]]]
  battery: |
    [[[
      if (states['sensor.redmi_k20_pro_battery_state'].state =='charging') {
        return `<ha-icon
        icon="mdi:battery-charging"
        style="width: 24px; height: 24px; color: #fff;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.redmi_k20_pro_battery_level'].state}%</span></span>`;
      } else {
        return `<ha-icon
        icon="mdi:battery"
        style="width: 24px; height: 24px; color: #fff;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.redmi_k20_pro_battery_level'].state}%</span></span>`;
      }
    ]]]