How to implement this Heating Timer Card and Logic

Configuration
1

Capture

How would I implement this in HA and Lovelace?

  1. The three buttons are only to be coloured when selected. I do not want to use the 'standard/ switch icons/controls - the one where it moves left/right when on/off.
  2. Button is selected by pressing it.
  3. A button can only be deselected by pressing one of the other two unselected buttons.
  4. Default button is OFF and selected (coloured red).
  5. On/Off times are 24hr.
  6. Four rows of timers.
  7. Each On/Off time pair can be assigned to multiple days of the week, or none.
  8. Days of week is a tick box (or similar control if available in lovelace)
  9. Tick boxes toggle (selected/deselected) by pressing them.

I have no idea where to start with the card.

For the logic, I guess I could have three separate switches and use automation to control their behaviour? Or is there a better way - like to have a group of mutually exclusive switches where only one can be on at any one time? Can this be done?

The timers - it is possible to have arrays of times. Could I use:

entity: switch.heat_timer
attribute: times
array:
  <1st time on>
  <1st time off>
  <2nd time on>
  <2nd time off>
  <3rd time on>
  <3rd time off>
  <4th time on>
  <4th time off>

or might I use :-1:

{% set timers = { 'on1':<a time?> , 'off1':<time> , 'selected1':'false; 'on2':<time> ... and so on}
{% set keys = timers.keys() | list %}
{% set values = timers.values() | list %}
{{ .. loop through timers ...}

On1, off1 and the selected1 is for the tickbox, on2, off2, selected2 and so on. Could I map those to input_time sensors?

I have no idea how to accomplish this - or even if it is possible. Then some automation would need to review these times through the day. Actually, would I be better off if each on/off pair triggers an event?

Help much appreciated please.