Hi all long time reader first time poster 
I realise it appears i am asking for people to do the work for me and i apologize, it’s just i am a bit Dyslexic and i have tried for weeks scouring the internet, trying to read code examples and programming references and whatnot and i just cannot for the life of me get my head around it.
I have tried myself for weeks to get what i would like done but i seem to do one thing and break another 
I have a card that in it’s current state looks like this: 
The code is currently configured as:
type: custom:button-card
entity: sensor.rpi_temp_docker01
icon: mdi:raspberry-pi
aspect_ratio: 1/1
name: Docker01
styles:
card:
- border-radius: 10%
- padding: 3%
- color: ivory
- font-size: 11px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state < 60) return 'lime';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 70%
- margin-top: '-10%'
custom_fields:
temp:
- align-self: start
- justify-self: end
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.rpi_cpu_use_docker01"].state > 80) return
"red"; ]]]
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.rpi_mem_used_docker01"].state > 80) return
"red"; ]]]
sd:
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.rpi_disk_used_docker01"].state > 80) return
"red"; ]]]
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${entity.state}°C</span>`
]]]
cpu: |
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.rpi_cpu_use_docker01'].state}%</span></span>`
]]]
ram: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.rpi_mem_used_docker01'].state}%</span></span>`
]]]
sd: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.rpi_disk_used_docker01'].state}%</span></span>`
]]]
What i am wanting to do is under “SD” is to add in another entry called “STATUS” which refers to “binary_sensor.docker01_operational_status” - and i would like status to say Online instead of just On and Offline instead of Off. The code of that binary sensor is:
binary_sensor:
- platform: ping
host: 192.168.1.200
name: "Docker01 Operational Status"
count: 5
scan_interval: 30
- platform: template
sensors:
docker01_presence:
device_class: presence
value_template: "{{ is_state('binary_sensor.docker01_operational_status','on') }}"
If we need to move the thermometer to get what i would like working we can and place it under the “SD” and “STATUS” area
I would like the icon of the raspberry pi to be GREEN when status of the binary sensor is on and red if the status is off
I would also like to control the card by tapping asking to confirm if i wish to reboot and then run “button.rpi_reboot_docker01_command”
Or if i tap and hold a confirmation if i want to shutdown and then run “button.rpi_shutdown_docker01_command”
Any assistance is very much appreciated and will help me in my way to learn the coding to see the differences of before/after 
Thanking you in advance
Daniel