{% if format =="hms"%}
<div class="container">
    <div class="row">
        <div id="tstimerstart_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttonstart_{{ran}}" class="btn btn-primary" type="button">Starte Countdown</button>
        </div>
        <div id="tstimerreset_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttonreset_{{ran}}" class="btn btn-secondary" type="button">Setze Countdown zurück</button>
        </div>
        <div id="tstimerstop_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttonstop_{{ran}}" class="btn btn-secondary" type="button">Stoppe Countdown</button>
        </div>
        <div id="tstimercontinue_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttoncontinue_{{ran}}" class="btn btn-secondary" type="button">Setze Countdown fort</button>
        </div>
        <div class="col-sm-6">
            <div class="row justify-content-center">
                <div id="tstimer_{{ran}}_h">
                    {% if h*60*60+m*60+s >= 86400 %}
                    <p>23</p>
                    {% else %}
                        {% if h < 10 %}
                        <p>0{{h}}</p>
                        {% else %}
                        <p>{{h}}</p>
                        {% endif %}
                    {% endif %}
                </div>
                <div>
                    <p>:</p>
                </div>
                <div id="tstimer_{{ran}}_m">
                    {% if h*60*60+m*60+s >= 86400 %}
                    <p>59</p>
                    {% else %}
                        {% if m < 10 %}
                        <p>0{{m}}</p>
                        {% else %}
                        <p>{{m}}</p>
                        {% endif %}
                    {% endif %}
                </div>
                <div>
                    <p>:</p>
                </div>
                <div id="tstimer_{{ran}}_s">
                    {% if h*60*60+m*60+s >= 86400 %}
                    <p>59</p>
                    {% else %}
                        {% if s < 10 %}
                        <p>0{{s}}</p>
                        {% else %}
                        <p>{{s}}</p>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% elseif format == "ms"%}
<div class="container">
    <div class="row">
        <div id="tstimerstart_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttonstart_{{ran}}" class="btn btn-primary" type="button">Starte Countdown</button>
        </div>
        <div id="tstimerreset_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttonreset_{{ran}}" class="btn btn-secondary" type="button">Setze Countdown zurück</button>
        </div>
        <div id="tstimerstop_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttonstop_{{ran}}" class="btn btn-secondary" type="button">Stoppe Countdown</button>
        </div>
        <div id="tstimercontinue_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttoncontinue_{{ran}}" class="btn btn-secondary" type="button">Setze Countdown fort</button>
        </div>
        <div class="col-sm-6">
            <div class="row justify-content-center">
                <div id="tstimer_{{ran}}_m">
                    {% if h*60*60+m*60+s >= 3600%}
                    <p>59</p>
                    {% else %}
                        {% if m < 10 %}
                        <p>0{{m}}</p>
                        {% else %}
                        <p>{{m}}</p>
                        {% endif %}
                    {% endif %}
                </div>
                <div>
                    <p>:</p>
                </div>
                <div id="tstimer_{{ran}}_s">
                    {% if h*60*60+m*60+s >= 3600 %}
                    <p>59</p>
                    {% else %}
                        {% if s < 10 %}
                        <p>0{{s}}</p>
                        {% else %}
                        <p>{{s}}</p>
                        {% endif %}
                    {% endif %}
                </div>
            </div>

        </div>
    </div>
</div>
{%elseif format == "s"%}
<div class="container">
    <div class="row">
        <div id="tstimerstart_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttonstart_{{ran}}" class="btn btn-primary" type="button">Starte Countdown</button>
        </div>
        <div id="tstimerreset_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttonreset_{{ran}}" class="btn btn-secondary" type="button">Setze Countdown zurück</button>
        </div>
        <div id="tstimerstop_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttonstop_{{ran}}" class="btn btn-secondary" type="button">Stoppe Countdown</button>
        </div>
        <div id="tstimercontinue_{{ran}}" class="col-sm-6">
            <button id="tstimerbuttoncontinue_{{ran}}" class="btn btn-secondary" type="button">Setze Countdown fort</button>
        </div>
        <div class="col-sm-6">
            <div class="row justify-content-center">
                <div id="tstimer_{{ran}}_s">
                    <p>{{h*60*60+m*60+s}}</p>
                </div>
            </div>
        </div>
    </div>
</div>
{%endif%}
<script>
    jQuery(document).on('click', '#tstimerbuttonstart_{{ran}}', function(){
        var stopVariant = {{stop}};

        var h = {{h}};
        var m = {{m}};
        var s = {{s}};
        var format = "{{format}}";

        h = h*60*60;
        m = m*60;

        var endTime = h + m + s;

        if(format == "hms" && endTime >= 86400){
            endTime = 86399;
        }
        else if(format == "ms" && endTime >= 3600){
            endTime = 3599;
        }
        // Ausgrauen des Buttons
        if(stopVariant == 0){
            jQuery('#tstimerbuttonstart_{{ran}}').prop("disabled", true);
        }
        // Reset
        else if(stopVariant == 1){
            jQuery('#tstimerstart_{{ran}}').css("display", "none");
            jQuery('#tstimerreset_{{ran}}').css("display", "block");
        }
        // Stop/Continue
        else if(stopVariant == 2){
            jQuery('#tstimerstart_{{ran}}').css("display", "none");
            jQuery('#tstimerstop_{{ran}}').css("display", "block");
        }

        startTimer_{{ran}}(endTime, format);
    });

    jQuery(document).on('click', '#tstimerbuttoncontinue_{{ran}}', function(){

        var format = "{{format}}";
        var h = parseInt(jQuery('#tstimer_{{ran}}_h p').text());
        var m = parseInt(jQuery('#tstimer_{{ran}}_m p').text());
        var s = parseInt(jQuery('#tstimer_{{ran}}_s p').text());

        var endTime;
        if(format == "hms"){
            endTime = h*60*60+m*60+s;
        }
        else if(format == "ms"){
            endTime = m*60+s;
        }
        else if(format == "s"){
            endTime = s;
        }

        jQuery('#tstimercontinue_{{ran}}').css("display", "none");
        jQuery('#tstimerstop_{{ran}}').css("display", "block");
        startTimer_{{ran}}(endTime, format);
    });



    function startTimer_{{ran}}(endTime, format){
        var currentTime = 0;
        var thisInterval = setInterval(function(){
            var remainingTime = endTime - currentTime;
            jQuery(document).on('click', '#tstimerbuttonreset_{{ran}}', function(){
                currentTime = 0;
            });
            jQuery(document).on('click', '#tstimerbuttonstop_{{ran}}', function(){
                jQuery('#tstimerstop_{{ran}}').css("display", "none");
                jQuery('#tstimercontinue_{{ran}}').css("display", "block");
                clearInterval(thisInterval);
            });
            if(format == "hms"){
                var hours = Math.floor((remainingTime % ( 60 * 60 * 24)) / (60 * 60));
                var minutes = Math.floor((remainingTime % (60 * 60)) / (60));
                var seconds = Math.floor((remainingTime % (60)));
                if(hours < 10){
                    jQuery('#tstimer_{{ran}}_h p').text("0"+hours);
                }
                else{
                    jQuery('#tstimer_{{ran}}_h p').text(hours);
                }
                if(minutes < 10){
                    jQuery('#tstimer_{{ran}}_m p').text("0"+minutes);
                }
                else{
                    jQuery('#tstimer_{{ran}}_m p').text(minutes);
                }
                if(seconds < 10){
                    jQuery('#tstimer_{{ran}}_s p').text("0"+seconds);
                }
                else{
                    jQuery('#tstimer_{{ran}}_s p').text(seconds);
                }
            }
            else if(format == "ms"){
                var minutes = Math.floor((remainingTime % (60 * 60)) / (60));
                var seconds = Math.floor((remainingTime % (60)));
                if(minutes < 10){
                    jQuery('#tstimer_{{ran}}_m p').text("0"+minutes);
                }
                else{
                    jQuery('#tstimer_{{ran}}_m p').text(minutes);
                }
                if(seconds < 10){
                    jQuery('#tstimer_{{ran}}_s p').text("0"+seconds);
                }
                else{
                    jQuery('#tstimer_{{ran}}_s p').text(seconds);
                }
            }
            else if(format == "s"){
                jQuery('#tstimer_{{ran}}_s p').text(remainingTime);
            }

            
            if (remainingTime <= 0) {
                jQuery('#tstimercontinue_{{ran}}').css("display", "none");
                jQuery('#tstimerreset_{{ran}}').css("display", "none");
                jQuery('#tstimerstop_{{ran}}').css("display", "none");
                jQuery('#tstimerstart_{{ran}}').css("display", "block");
                jQuery('#tstimerbuttonstart_{{ran}}').prop("disabled", false);
                clearInterval(thisInterval);
            }
            currentTime++;
        }, 1000);
    }

</script>

<style>
#tstimerreset_{{ran}}{
    display:none;
}
#tstimercontinue_{{ran}}{
    display:none;
}
#tstimerstop_{{ran}}{
    display:none;
}

#tstimerbuttonstart_{{ran}}, #tstimerbuttonreset_{{ran}}, #tstimerbuttonstop_{{ran}}, #tstimerbuttoncontinue_{{ran}}{
    width: 100%;
}
</style>