Kitchen timer: changing timer & sensor

I have a RPI+screen hanging in my kitchen. I would like to use it as kitchen timer. I checked out other projects in this community, but couldn’t find exactly what I was looking for. This is what I currently have:
kitchen_timer
A kichten timer start can be started, paused and stopped (=reset).
I can add/subtract the timer per 10 minutes, 1 minute and 10 seconds.

For accomplishing this, I’m using a timer and a sensor:
configuration.yaml

timer:
  kookwekker01:

sensors.yaml

- platform: template
  sensors:
    timer_remaining:
      entity_id: timer.kookwekker01
      value_template: "{{ state_attr('timer.kookwekker01', 'remaining').split(':')[1] + ':' +  state_attr('timer.kookwekker01', 'remaining').split(':')[2] }}"

My (simplified) card configuration for adding 10 seconds looks like this

type: custom:stack-in-card
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        name: Kookwekker 1
        styles:
          name:
            - font-size: 30px
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            tap_action:
              action: call-service
              service: |
                [[[
                  if (states['timer.kookwekker01'].state == 'active')
                    return 'script.timerpause';
                  return 'script.cooking';
                ]]]
              service_data:
                entity_id: timer.kookwekker01
            icon: |
              [[[
                if (states['timer.kookwekker01'].state == 'active')
                  return 'mdi:pause-circle';
                return 'mdi:play-circle';
              ]]]
            show_icon: true
            show_state: true
          - type: custom:button-card
            tap_action:
              action: call-service
              service: timer.cancel
              service_data:
                entity_id: timer.kookwekker01
            icon: mdi:close-circle
            show_icon: true
            show_state: true
  - type: horizontal-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            icon: mdi:chevron-double-up
          - type: custom:button-card
            icon: mdi:chevron-up
          - type: custom:button-card
            icon: mdi:chevron-double-up
            tap_action:
              action: call-service
              service: script.plus_10_seconds
          - type: custom:button-card
            color_type: blank-card
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - entity: timer.kookwekker01
            state: idle
        card:
          type: custom:button-card
          name: '00:00'
          entity: sensor.timer_remaining
          show_state: false
          show_icon: false
          show_name: true
          styles:
            name:
              - font-size: 125px
            card:
              - height: 120px
      - type: conditional
        conditions:
          - entity: timer.kookwekker01
            state: paused
        card:
          type: custom:button-card
          entity: sensor.timer_remaining
          show_state: true
          show_icon: false
          show_name: false
          styles:
            state:
              - font-size: 125px
            card:
              - height: 120px
      - type: conditional
        conditions:
          - entity: timer.kookwekker01
            state: active
        card:
          type: custom:button-card
          entity: timer.kookwekker01
          show_state: true
          show_icon: false
          show_name: false
          styles:
            state:
              - font-size: 125px
            card:
              - height: 120px
  - type: horizontal-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            icon: mdi:chevron-double-down
            styles:
              icon:
                - margin-left: 60%
          - type: custom:button-card
            icon: mdi:chevron-down
          - type: custom:button-card
            icon: mdi:chevron-double-down
          - type: custom:button-card
            color_type: blank-card

And this is the code I currently have in my scripts.yaml

plus_10_seconds:
  alias: Timer plus 10 seconds
  mode: single
  sequence:
    - choose:
      - conditions:
        - condition: state
          entity_id: timer.kookwekker01
          state: 'active'
        sequence:
          - service: timer.start
            data_template:
              duration: "{% if states.timer.kookwekker01.state == 'active' %}\n  {% set t\
                \ = states.timer.kookwekker01.attributes.finishes_at %} {% set f =\n  as_timestamp(strptime(t,\
                \ '%H:%M:%S')) %} {% set s = f-now().timestamp() %}\n  00:00:{{ s | int +\
                \ 10 }}\n{% else %}\n  00:00:10\n{% endif %}\n"
              entity_id: timer.kookwekker01
    - choose:
      - conditions:
        - condition: state
          entity_id: timer.kookwekker01
          state: 'pause'
        sequence:
          - service: python_script.set_state
            data_template:
              state: "???????"
              entity_id: sensor.timer_remaining

When paused or idle, I’m showing the sensor “time_remaining” state:


When running, the timer is shown.

What is working for my kitchen timer:

  • start timer
  • pause timer
  • reset timer
  • add 10 seconds when the timer is running

Problem is that I can’t add 10 seconds to the timer when it is paused or idle.
Any idea how to achieve this?
For testing, I tried setting the state if th sensor.time_remaining to “00:00” but this is also not working.

My sensor using this in configuration.yaml only shows the start time and is not counting down. Any ideas?
The timer created as helper is running, but the attribute “remaining” is not updated

Edit:
I get this to work in a Markdown card but ugly:

{% if (states("timer.kokstimer")) == "active" %}
  {% set t1 = (as_timestamp(state_attr("timer.kokstimer", "finishes_at")) | timestamp_custom('%H:%M')) %}
  {% set t2 = (now().timestamp() | timestamp_custom('%H:%M')) %}
  {% set tkvar = ((as_timestamp((state_attr("timer.kokstimer", "finishes_at"))))-now().timestamp()) %}
  {{ ((strptime(t1, "%H:%M") - strptime(t2, "%H:%M")).seconds /3601) | int}}:{{tkvar | timestamp_custom('%M')}}
{% else %}
--:--
{% endif %}

Progress, digging around the forum. Forget my lame try above, getting there …

<center><h1>
{% set t = 'timer.kokstimer' %}
{% set ts = states(t) %}
  {% if ts in ['paused', 'active', 'idle'] %}
    {% if ts == 'active' %}
      {% set td =  state_attr(t, 'finishes_at') | as_datetime - now() %}
      {% set t = td.seconds + td.days * 86400 %}
      {% set (minutes, seconds) = (t // 60, t % 60) %}
      {% set (hours, minutes) = (minutes // 60, minutes % 60) %}
      {{ '{:02d}:{:02d}'.format(hours, minutes) }}
    {% elif ts == 'paused' %}
      {% set (hours, minutes, seconds) = state_attr(t, 'remaining').split(':') | map('int') %}
      {{ '{:02d}:{:02d}'.format(hours, minutes) }}
    {% elif ts == 'idle' %}
      {{(state_attr('input_datetime.kokstimer_input', 'timestamp') - 3600) | timestamp_custom('%H:%M')}}
    {% endif %}
  {% else %}
    --:--
  {% endif %}
</h1>