{% extends "base.html" %}

{% block content %}
<div class="row">
    <h2>Configuration du VPN</h2>
    
    <div class="large-6 columns">
        <div class="panel">
            <h3>Statut</h3>
            <table class="full-width">
                <tr>
                    <td class="center"><span class="label">Identifiant</span></td>
                    <td>{{object.login}}</td>
                </tr>{% block password %}
                <tr>
                    <td class="center" colspan="2">
                        <a class="button radius tiny" id="passgen" href="{% url 'vpn:generate_password' object.pk %}"><i class="fa fa-refresh"></i>
 Générer un nouveau mot de passe</a>
                    </td>
                </tr>
                {% endblock %}<tr class="flatfield">
                    <td class="center"><span class="label">Commentaire</span></td>
                    <td><input type="text" value="{{object.comment}}" /></td>
                </tr>
                <tr>
                    <td class="center boolviewer" colspan="2">
                        <input type="checkbox" disabled="disabled"{% if object.activated %} checked="checked"{% endif %} />
                        <span>Ce VPN est {% if object.activated %}activé{% else %}désactivé{% endif %}</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="large-6 columns">
        <div class="panel">
            <h3>Adresses IP</h3>
            <table class="full-width">
                <tr class="flatfield">
                    <td class="center"><span class="label">IPv4</span></td>
                    <td><input type="text" name="endpoint4" {% if object.ipv4_endpoint %}value="{{ object.ipv4_endpoint }}" {% endif %} placeholder="Aucune adresse"/></td>
                </tr>
                <tr class="flatfield">
                    <td class="center"><span class="label">IPv6</span></td>
                    <td><input type="text" name="endpoint6" {% if object.ipv6_endpoint %}value="{{ object.ipv6_endpoint }}" {% endif %} placeholder="Aucune adresse"/></td>
                </tr>
                <tr>
                    <td class="center"><span class="label">Sous-réseaux</span></td>
                    <td>
                        {% if object.ipv4_endpoint or object.ipv6_endpoint %}<ul>
                            {% for subnet in object.administrative_subscription.ip_subnet.all %}<li>{{ subnet }}</li>{% endfor %}
                        </ul>{% else %}<span class="italic">Aucune adresse</span>{% endif %}
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div class="row">
    <h3 class="graphtitle">Graphe de trafic sur <span id="trafic_zoom">24 heures</span> :</h3>
    <img id="trafic_graph" src="{% url 'vpn:get_graph' vpn_id=object.pk %}" alt="Graphe de trafic {{ object.login }}" />
</div>

{% endblock %}
