ntopng/httpdocs/templates/pages/modals/pools/host_pool_member.template
2023-03-16 15:08:27 +00:00

111 lines
6.2 KiB
Text

{#
(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-bs-dismiss="modal" class="btn btn-danger confirm" type="button">{{ i18n("abort") }}</button>
</div>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<form role="form">
<div class="modal-body">
<div class="mb-3 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-bs-toggle="buttons">
<label class="btn btn-secondary active">
<input id="ip-radio-{{ modal_type }}" class="btn-check" type="radio" name="member_type" value="ip" checked> {{ i18n("host_pools.ip_address") }}
</label>
<label class="btn btn-secondary">
<input id="network-radio-{{ modal_type }}" class="btn-check" type="radio" name="member_type" value="network"> {{ i18n("host_pools.network") }}
</label>
<label class="btn btn-secondary">
<input id="mac-radio-{{ modal_type }}" class="btn-check" type="radio" name="member_type" value="mac"> {{ i18n("host_pools.mac_address") }}
</label>
</div>
</div>
</div>
<hr>
<div class="ip-fields">
<div class="mb-3 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="mb-3 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="mb-3 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="me-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="mb-3 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="mb-3 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 id="{{ modal_type }}-confirm-host-pool" type="submit" class="btn btn-primary">
{% if modal_type == "add" then %}
{{ i18n("add") }}
{% else %}
{{ i18n("apply") }}
{% end %}
</button>
</div>
</form>
</div>
</div>
</div>