{% extends "panel.html.twig" %}

{% block head %}
    {{ parent() }}

    <script src="/js/pages/servers/edit.js"></script>
{% endblock %}

{% block panel_contents %}
    <h1 class="title">Editing server '{{ server.getFqdn() }}'</h1>
    <div class="server-form" data-fingerprint="{{ server.getFingerprint() }}">
        <div class="row">
            <label for="fqdn">Hostname</label>
            <input name="fqdn" id="fqdn" type="text" value="{{ server.getFqdn() }}">
        </div>
        <div class="row">
            <label for="external-ip">External IP</label>
            <input name="external-ip" id="external-ip" type="text" value="{{ server.getExternalIp() }}">
        </div>
        <h2>Details</h2>
        <div class="row">
            <label for="location">Location</label>
            <input name="location" id="location" type="text" value="{{ server.getLocation() }}">
        </div>
        <div class="row">
            <label for="speed">Speed</label>
            <input name="speed" id="speed" type="number" min="-1" value="{{ server.getSpeed() }}">
        </div>
        <h2>Config</h2>
        <div class="row">
            <label for="internal-ip">Internal IP</label>
            <input name="internal-ip" id="internal-ip" type="text" value="{{ server.getInternalIp() ?: '10.24.0.0' }}">
        </div>
        <div class="row">
            <label for="netmask">Netmask</label>
            <input name="netmask" id="netmask" type="number" min="8" max="24" value="{{ server.getNetmask() ?: 16 }}">
        </div>
        <div class="row">
            <label for="port">Port</label>
            <input name="port" id="port" type="number" value="{{ server.getPort() ?: 1194 }}">
        </div>
        <div class="row">
            <label for="protocol">Protocol</label>
            <select name="protocol" id="protocol">
                <option value="udp" {{ server.getProtocol() == 'udp' ? 'selected' }}>UDP</option>
                <option value="tcp" {{ server.getProtocol() == 'tcp' ? 'selected' }}>TCP</option>
            </select>
        </div>
        <div class="row">
            <label for="first-dns">first DNS</label>
            <input name="first-dns" id="first-dns" type="text" value="{{ server.getFirstDns() ?: '8.8.8.8' }}" />
        </div>
        <div class="row">
            <label class="control-label col-md-4" for="second-dns">second DNS</label>
            <input name="second-dns" id="first-dns" type="text" class="form-control" value="{{ server.getSecondDns() ?: '8.8.4.4' }}" />
        </div>
    </div>

    <div class="buttons">
        <button class="save" type="button">Save</button>
        {% if server.getStatus() == 'registered' %}
            <button class="save-and-sign" type="button">Sign and save</button>
        {% endif %}
    </div>
{% endblock %}