{% extends "base.html" %}

{% block title %}IoT Transparency – Network Monitoring{% endblock %}

{% block content %}

<progress value="50" max="100"></progress>
<h1>IoT Transparency Setup</h1>
<h2>Step 3 of 4: Enable Network Monitoring</h2>

{% include "network/partials/manage_network_text.html" with context %} 

{% set arp_spoofable_count = items | selectattr("is_iot") | list | length %}
{% set arp_spoof_count = items | selectattr("is_arp_spoofed") | list | length %}

{% if items | length < arp_spoof_min %}
<article class="warning">
    Error 201: Fewer than {{ arp_spoof_min }} devices were found on your network ({{ arp_spoofable_count }} IoT devices, {{ items | length }} total devices).
    Please return to Qualtrics, indicate you were not able to successfully set up IoT Transparency, and paste this error message.
</article>
{% else %}

{% if arp_spoofable_count < arp_spoof_min %}
<article class="warning">
    Error 202: Fewer than {{ arp_spoof_min }} IoT devices were found on your network ({{ arp_spoofable_count }} IoT devices, {{ items | length }} total devices).
    Please open the "Missing devices?" section below to review the other devices found on your network and add their details.
    If you have fewer than {{ arp_spoof_min }} IoT devices, or IoT Transparency has not discovered your IoT devices, please return to Qualtrics, indicate you were not able to successfully set up IoT Transparency, and paste this error message. 
</article>
{% endif %}

{% if not arp_spoof %}
<article class="warning">Error 3: Network monitoring has been disabled through the Home Assistant add-on settings. To re-enable it, go to Home Assistant, Settings, Add-ons, IoT Transparency, Configuration, and enable Allow network monitoring.</article>
{% endif %}

{% include "network/partials/manage_network_table.html" with context %}

<div
 style="display: inline-block" tabindex="0"
 class="continue-button"
 id="setup-network-continue-button"
 {% if arp_spoof_count < arp_spoof_min %} data-tooltip="Enable network monitoring for {{arp_spoof_min}} devices to continue"{%endif%}
>
    <a 
     role="button" 
     class="continue-button"
     href="{{ url_for('setup_complete_step', step='network') }}"
     id="network-continue-btn"
     {% if arp_spoof_count < arp_spoof_min %} disabled {%endif%}
    >Continue</a>
</div>

<script>

    document.body.addEventListener("updateContinueButton", function(evt){
        enabledToggles = evt.detail.value;
        if (enabledToggles >= {{ arp_spoof_min }}) {
            console.log("enabling button from event");
            document.getElementById('network-continue-btn').removeAttribute('disabled');
        } else {
            console.log("disabling button from event");
            document.getElementById('network-continue-btn').setAttribute('disabled', 'disabled');
        }
    })
</script>

{% endif %}

{% endblock %}