{% set devices = imp0rt('kaithem.src.devices') %}
{% set util = imp0rt('kaithem.src.util') %}

<script type="module" src="/static/js/picodash.mjs?"></script>


<article class="tagbox card w-sm-full flex-col">
    <header>
        <h3><a href="/tagpoints/{{ util.url(obj.tagpoints[i].name) }}">{{ i.split(".",1)[-1]| escape }}</a></h3>
    </header>

    <div class="grow">
        {% if obj.tagpoints[i].type in ('string','number', 'object') %}
        <h4>Current</h4>
        {% if obj.tagpoints[i].type in ('string', 'object') %}
        <ds-span source="tag:{{obj.tagpoints[i].name}}" filter="json: "></ds-span>

        {% else %}
        <ds-span
        data-testid="val-span-{{ i| escape }}"
        source="tag:{{obj.tagpoints[i].name}}" filter="fixedpoint: 4"></ds-span>

        {% endif %}

        {% elif hasattr(obj.tagpoints[i],"data_source_widget") and obj.tagpoints[i].subtype == 'mpegts' and obj.tagpoints[i].data_source_widget %}
        <div class="tool-bar">
            <a href="/beholder-plugin/mpeg-ts-stream?uuid={{ obj.tagpoints[i].data_source_widget.uuid}}" target="_blank">Fullscreen Stream</a>
        </div>

        {% elif obj.tagpoints[i].subtype =="bmp" %}

        <img src="data:image/bmp;base64,{{obj.tagpoints[i].as_base64()}}">

        {% else %}
        Binary data tagpoint cannot be displayed.
        {% if obj.tagpoints[i].subtype == 'mpegts' %}
        If this is a video feed, you may need to set up Permissions on this device.
        {{ str(obj.tagpoints[i].data_source_widget)}}
        {% endif %}
        {% endif %}

        {% if not obj.tagpoints[i].subtype == 'mpegts' %}
        {% if obj.tagpoints[i].active_claim.priority > 50.5 %}
        Overridden: {{ obj.tagpoints[i].active_claim.name }}
        {% else %}
        <div class="tool-bar">

            <button type="button"
             aria-label="refresh"
             onclick="window._generic_ws_channel.send(['refresh', '{{ i| escape }}'])">
             <span class="mdi mdi-refresh"></span>
            </button>
            {% if (not hasattr(obj.tagpoints[i],"writable")) or obj.tagpoints[i].writable %}
            {% if obj.tagpoints[i].subtype == 'bool' or obj.tagpoints[i].subtype == 'boolean' %}
            <button type="button" onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', 0])">Off</button>
            <button type="button" onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', 1])">On</button>
            {% elif obj.tagpoints[i].subtype == 'tristate' %}
            <button type="button" onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', 0])">Off</button>
            <button type="button" onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', 1])">On</button>
            <button type="button" onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', -1])">Unset</button>
            {% elif obj.tagpoints[i].subtype == 'trigger' %}
            <button type="button"
                onclick="triggerCounters['{{ i| escape }}'] = (triggerCounters['{{ i| escape }}']||0)+1; window._generic_ws_channel.send(['set', '{{ i| escape }}', triggerCounters['{{ i| escape }}']])">Trigger</button>
            {% elif obj.tagpoints[i].subtype == 'color' %}
            <button type="button"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', prompt('New value?')])">Set
                Hex</button>
            <button type="button" style="background-color: black;  color: lightblue;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#000000'])">Blk</button>
            <button style="background-color: #FF0000;" type="button"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#FF0000'])">Red</button>
            <button style="background-color: #FFDD00;" type="button"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#FFDD00'])">Yel</button>
            <button style="background-color: #00FF00;" type="button"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#00FF00'])">Grn</button>
            <button style="background-color: #0000FF;" type="button"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#0000FF'])">Blu</button>
            <button style="background-color: #8F17E5;" type="button"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#8F17E5'])">Prp</button>
            <button type="button" style="background-color: white;  color: darkgray;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#FFFFFF'])">Wht</button>
            {% else %}
            <button type="button"
                data-testid="set-val-button-{{ i| escape }}"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', prompt('New value?')])">Set
                val</button>
            {% if obj.tagpoints[i].max==1 and obj.tagpoints[i].min==0 %}
            <button type="button" onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', 0])">Set 0</button>
            <button type="button" onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', 1])">Set 1</button>
            {% endif %}
            {% endif %}
            {% else %}
            {% if  obj.tagpoints[i].type=='number' %}
            <button type="button" onclick="window.setFake('{{ i| escape }}', null)"
                title="Disable faking and use real value">Stop
                fake</button>

            {% if obj.tagpoints[i].subtype == 'bool' or obj.tagpoints[i].subtype == 'boolean' %}
            <button type="button" onclick="window.setFake('{{ i| escape }}', 0)" title="Fake input being zero">Fake
                Off</button>
            <button type="button" onclick="window.setFake('{{ i| escape }}', 1)" title="Fake input being one">Fake On</button>
            <button type="button" onmousedown="window.setFake('{{ i| escape }}', 1)"
                onmouseup="window.setFake('{{ i| escape }}', null)" title="Fake 1 while held">Fake Press</button>
            {% else %}
            <button type="button" onclick="window.setFake('{{ i| escape }}', prompt('New value?'))">Set fake val</button>
            {% if obj.tagpoints[i].max==1 and obj.tagpoints[i].min==0 %}
            <button type="button" onclick="window.setFake('{{ i| escape }}', 0)" title="Fake input being zero">Fake
                Off</button>
            <button type="button" onclick="window.setFake('{{ i| escape }}', 1)" title="Fake input being one">Fake On</button>
            {% endif %}
            {% endif %}

            {% if obj.tagpoints[i].subtype == 'tristate' %}
            <button type="button" onclick="window.setFake('{{ i| escape }}', -1)" title="Fake input being tristate/-1">Fake
                Unset</button>
            {% endif %}
            {% endif %}
            {% endif %}

            {% if devices.callable(obj.tagpoints[i].active_claim.value) %}
            <button type="button" onclick="window._generic_ws_channel.send(['refresh', '{{ i| escape }}'])">Refresh</button>
            {% else %}
            {% endif %}
        </div>
        {% endif %}



        {% if obj.tagpoints[i].subtype == 'color' %}
        <div class="tool-bar">
            <button type="button" style="background-color: #fafafa;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#fafafa'])">Argent</button>
            <button type="button" style="background-color: #ffe066;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#ffe066'])">Or</button>
            <button type="button" style="background-color: #f0dc82;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#f0dc82'])">Buff</button>
            <button type="button" style="background-color: #7c1c05;  color: lightblue;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}' , '#7c1c05' ])">Copper</button>
        </div>
        <div class="tool-bar">
            <button type="button" style="background-color: #d7374a;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#d7374a'])">Gules</button>
            <button type="button" style="background-color: #333333; color: lightblue;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#333333'])">Sable</button>
            <button type="button" style="background-color: #377cd7;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#377cd7'])">Azure</button>
            <button type="button" style="background-color: #26c061;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#26c061'])">Vert</button>
            <button type="button" style="background-color: #854296;  color: lightblue;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#854296'])">Purpure</button>
        </div>
        <div class="tool-bar">
            <button type="button" style="background-color: #85185b;  color: lightblue;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#85185b'])">Murrey</button>
            <button type="button" style="background-color: #b63a3a;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#b63a3a'])">Sanguine</button>
            <button type="button" style="background-color: #cc7f19;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#cc7f19'])">Tenné</button>
            <button type="button" style="background-color: #F27900;  color: lightblue;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#F27900'])">Orange</button>
            <button type="button" style="background-color: #FEC3AC;"
                onclick="window._generic_ws_channel.send(['set', '{{ i| escape }}', '#FEC3AC'])">Carnation</button>
            <button type="button" style="background-color: #797673; color: lightblue;"" onclick="
                window._generic_ws_channel.send(['set', '{{ i| escape }}' , '#797673' ])">Cendrée</button>
        </div>
        {% endif %}

        {% endif %}
    </div>
    <footer>

    </footer>
</article>