{#
    (C) 2020 - ntop.org
#}
<div class="modal show fade" tabindex="-1" role="dialog" id="{{ modal_type }}-member-modal">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    {% if modal_type == "add" then %}
                        {{ i18n("host_pools.add_host_pool_member") }}
                    {% else %}
                        {{ i18n("host_pools.edit_host_pool_member") }}
                    {% end %}
                </h5>
                <div class="modal-close">
                    <div class="confirm-closing" style="display: none;">
                        <span class='mx-2' style="vertical-align: middle;"><b>{{ i18n("host_pools.validation.abort_add_member") }}</b></span>
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-secondary cancel" type="button">{{ i18n("cancel") }}</button>
                            <button data-dismiss="modal" class="btn btn-danger confirm" type="button">{{ i18n("abort") }}</button>
                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            <form role="form">
                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-form-label col-sm-4" >
                            <b>{{ i18n("host_pools.member_type") }}</b>
                        </label>
                        <div class="col-sm-6">
                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-secondary active">
                                  <input id="ip-radio" type="radio" name="member_type" value="ip" checked> {{ i18n("host_pools.ip_address") }}
                                </label>
                                <label class="btn btn-secondary">
                                  <input id="network-radio" type="radio" name="member_type" value="network"> {{ i18n("host_pools.network") }}
                                </label>
                                <label class="btn btn-secondary">
                                  <input id="mac-radio" type="radio" name="member_type" value="mac"> {{ i18n("host_pools.mac_address") }}
                                </label>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="ip-fields">
                        <div class="form-group row">
                            <label class="col-form-label col-sm-4" >
                                <b>{{ i18n("host_pools.ip_address") }}</b>
                            </label>
                            <div class="col-sm-4">
                                <input data-pattern="ipv4|ipv6" placeholder="192.168.1.1" required name="ip_address" class="form-control"  />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-sm-4" >
                                {{ i18n("vlan") }}
                            </label>
                            <div class="col-sm-4">
                                <input min="0" name="ip_vlan" class="form-control" type="number" placeholder="0" />
                            </div>
                        </div>
                    </div>
                    <div class="network-fields">
                        <div class="form-group row">
                            <label class="col-form-label col-sm-4" >
                                <b>{{ i18n("host_pools.network") }}</b>
                            </label>
                            <div class="col-sm-4 pr-0">
                                <input disabled required style="width: calc(100% - 15px);" name="network" class="form-control d-inline" placeholder="172.16.0.0" data-pattern="ipv4|ipv6" />
                            </div>
                            <div class="col-sm-2 pl-0">
                                <span class="mr-2">/</span>
                                <input disabled placeholder='24' required class="form-control d-inline w-75" min="1" max="127" type="number" name="cidr">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-sm-4" >
                                {{ i18n("vlan") }}
                            </label>
                            <div class="col-sm-4">
                                <input disabled placeholder="0" min="0" name="network_vlan" class="form-control" type="number" />
                            </div>
                        </div>
                    </div>
                    <div class="mac-fields">
                        <div class="form-group row">
                            <label class="col-form-label col-sm-4">
                                <b>{{ i18n("host_pools.mac_address") }}</b>
                            </label>
                            <div class="col-sm-4">
                                <input disabled required placeholder="AA:BB:CC:DD:EE:AA" name="mac_address" class="form-control" data-pattern="macAddress" />
                            </div>
                        </div>
                    </div>
                    <span class="invalid-feedback" id="{{ modal_type }}-modal-feedback"></span>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">
                        {% if modal_type == "add" then %}
                            {{ i18n("add") }}
                        {% else %}
                            {{ i18n("edit") }}
                        {% end %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>