{% extends "device.html" %}
<a class="item" href="/settings">Paramètres</a>
{% block submenu%}
<a class="item" href="/device">Devices</a>
<div class="active item">Configuration pour {{device.name if device is not None else slug}}</div>
{% end %}
{% block body %}
<div class="ui inverted segment">
    <form name="card" class="ui inverted form" method="get" action="./create">
        <select id="card" name="card" class="ui dropdown">
            <option value="">Type de carte</option>
            {% if cards is not None%}
            {% for c in cards %}
            <option {% if card is not None and card.name == c.name %} selected="selected" {% end %} value="{{c.name}}">{{c.name}}</option>
            {% end %}
            {% end %}
        </select>
    </form>
    <a class="ui green button" href="/card/create"><i class="edit outline icon"></i>Créer une carte</a>
</div>
<div class="ui inverted segment">
    <form class="ui inverted form" method="post" action=".">
        {% if card is None%}
        <fieldset disabled="disabled">
            {% end %}
            <div class="field">
                <label>Nom du device</label>
                <input name="name" placeholder="Nom du device" type="text" value="{{''if device is None else device.name}}">
            </div>

            {% if card is not None %}
            <h2>Entrées analogiques</h2>
            <a class="ui green button" href="/sensor/create"><i class="edit outline icon"></i>Créer un capteur</a>
            {% for i in range(card.nb_input_pins)%}
            <div class="inline field">
                <h3>Port {{i}}</h3>
                <div class="ui toggle checkbox">
                    <input name="port{{i}}[enabled]" type="checkbox" {% raw '' if device is None or not device.ports['input'][i].enabled else 'checked="checked"'%}>
                    <label>Activer</label>
                </div>
                <label>Nom du port</label>
                <input name="port{{i}}[name]" class="port{{i}}" placeholder="Nom" type="text" value="{{'' if device is None else device.ports['input'][i].name}}" {% raw 'disabled="disabled"' if device is None or not device.ports['input'][i].enabled else '' %}>
                <label>Type de capteur</label>
                <select id="sensor" name="port{{i}}[_type]" class="ui dropdown port{{i}}" {% raw 'disabled="disabled"' if device is None or not device.ports['input'][i].enabled else '' %}>
                    <option value="">Type de capteur</option>
                    {% if sensors is not None%}
                    {% for s in sensors %}
                    <option {% if device is not None and device.ports['input'][i]._type is not None and device.ports['input'][i]._type == s.name %}selected="selected"{% end %} value="{{s.name}}">{{s.name}}</option>
                    {% end %}
                    {% end %}
                </select>
            </div>
            {% end %}
            <h2>Sorties digitales</h2>
            {% for i in range(card.nb_output_pins)%}
            <div class="inline field">
                <h3>Port {{i}}</h3>
                <div class="ui toggle checkbox">
                    <input name="port{{i + card.nb_input_pins}}[enabled]" type="checkbox" {% raw '' if device is None or not device.ports['output'][i].enabled else 'checked="checked"'%}>
                    <label>Activer</label>
                </div>
                <label>Nom du port</label>
                <input name="port{{i+ card.nb_input_pins}}[name]" class="port{{i + card.nb_input_pins}}" placeholder="Nom" type="text" value="{{ '' if device is None else device.ports['output'][i].name}}" {% raw 'disabled="disabled"' if device is None or not device.ports['output'][i].enabled else '' %} >
            </div>
            {% end %}
            {% end %}

            {% if method is not 'post'%}
            <input name="_method" type="hidden" value="{{method}}" />
            {% end %}
            {% if card is not None%}
            <input name="card_name" type="hidden" value="{{card.name}}" />
            {% end %}
            {% if device is not None%}
            <input name="identifier" type="hidden" value="{{device.identifier}}" />
            {% end %}
            <button class="ui button" type="submit">Envoyer</button>
            {% if card is None%}
        </fieldset>
        {% end %}
    </form>
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#card').on('change', function() {
        document.forms["card"].submit();
    });

    $(":checkbox").on('change', function() {
        let port = this.name.split("[")[0]
        if(this.checked)
        $("."+port).prop('disabled', '');
        else
        $("."+port).prop('disabled', 'disabled');
    });
});
</script>
{% end %}
