{% extends 'commands.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% import 'macros.html' as macros %}

{% set sidebar_state = 'disabled' %}
{% set btn_back = true %}

{% block nav_image %} active{% endblock %}
{% block nav_image_update %}active{% endblock %}
{% block content %}

<h2 class="mx-5 subhead-heading">{{_('Update partition image')}}</h2>

{{ macros.cmd_selected_clients(selected_clients) }}

<form  class="form mx-5" method="POST" action="{{ url_for('action_image_update') }}">
    {{ form.hidden_tag() }}

    {{ form.ip }}

    <div class="form-group">
        {{ form.os.label(class="form-label") }}
        {{ form.os(class="form-control", onchange="onPartitionClicked(this.value)") }}
    </div>

    <div class="form-group">
        {{ form.image.label(class="form-label") }}
        {{ form.image(class="form-control") }}
    </div>

    <div class="form-group form-check">
        {{ form.backup(class="form-check-input") }}
        {{ form.backup.label(class="form-check-label") }}
    </div>

    <div class="form-group">
        {{ form.update(class="btn btn-primary") }}
    </div>
</form>

<script>
    const partContent = {{ part_content|tojson|safe }};
    const imageField = document.querySelector('select[name="{{ form.image.name }}"]');
    const partField = document.querySelector('select[name="{{ form.os.name }}"]');

    function onPartitionClicked(selectedValue) {
        if (selectedValue in partContent) {
            imageField.value = partContent[selectedValue]
        }
    }

    onPartitionClicked(partField.value)
</script>

{% endblock %}