{% extends 'base.html.twig' %}

{% block title %}Přidat{% endblock %}
{% block main %}
<div class="p-3">
    <h4>Přidávání zařízení</h4>
    {{ form_start(form) }}
        <div class="">
            {{ form_row(form.dhcp_identifier) }}
        </div>
        <div class="">
            {{ form_row(form.ipv4_address) }}
        </div>
        <div class="">
            {{ form_row(form.hostname) }}
        </div>
    <div class="">

            {{ form_row(form.internet_access) }}

    </div>

    <div {{ stimulus_controller('form-collection') }}
            data-form-collection-index-value="{{ form.forwardings|length > 0 ? form.forwardings|last.vars.value
            .forwardId + 1 : 0 }}"
            data-form-collection-prototype-value="{{ '<div class="d-flex justify-content-around align-items-baseline" id="forwarding_row___name__"> <div class="flex-fill"> <div class="mb-3"> <label for="host_forwardings___name___hub_port" class="form-label required">Port na hubu</label> <input type="number" id="host_forwardings___name___hub_port" name="host[forwardings][__name__][hub_port]" required="required" class="form-control"> </div> </div> <i class="mx-lg-5 mx-2 align-self-center fa-solid fa-arrow-right-long fa-2xl"> </i> <div class="flex-fill"><div class="mb-3"> <label for="host_forwardings___name___destination_port" class="form-label required">Port na zařízení</label> <input type="number" id="host_forwardings___name___destination_port" name="host[forwardings][__name__][destination_port]" required="required" class="form-control"> </div> </div> <button type="button" class="btn ms-2 ms-lg-2 align-self-center" data-action="form-collection#removeCollectionElement" data-form-collection-id-param="__name__"> <i class="fa-sharp fa-solid fa-trash fa-lg"></i> </button> </div>'|e('html_attr') }}"
    >
    <div class="d-inline-flex justify-content-start align-items-center">
        <h6 class="mb-0">PAT</h6>
        <button class="btn" type="button" {{ stimulus_action('form-collection', 'addCollectionElement') }}>
            <i class="fa-solid fa-plus fa-lg"></i>
        </button>
    </div>
    <div {{ stimulus_target('form-collection', 'collectionContainer') }}>
        {% for forwarding in form.forwardings %}
    <div class="d-flex justify-content-around align-items-baseline" id="forwarding_row_{{ forwarding.vars.value
    .forwardId }}">
            <div class="flex-fill">
                {{ form_row(forwarding.hub_port) }}
            </div>
        <i class="mx-lg-5 mx-2 fa-solid fa-arrow-right-long fa-2xl align-self-center"></i>
            <div class="flex-fill">
                {{ form_row(forwarding.destination_port) }}
            </div>
        <button type="button" class="btn ms-2 ms-lg-2 align-self-center"
                {{ stimulus_action('form-collection', 'removeCollectionElement') }}
                data-form-collection-id-param="{{ forwarding.vars.value.forwardId }}">
            <i class="fa-sharp fa-solid fa-trash fa-lg"></i>
        </button>
    </div>
        {% endfor %}
    </div>
    </div>

    <div class="d-flex align-items-center justify-content-lg-end justify-content-start">
        <a class="btn btn-outline-secondary me-2 mb-3" href="{{ path('app_hosts') }}">
            Zpět
        </a>
        {{ form_row(form.save) }}
    </div>
    {{ form_end(form) }}
{#    {{  form(form) }}#}


</div>
{% endblock %}