{% extends "base.html" %}
{% block nav_home %} active{% endblock %}
{% block extra_css %}
        #summary_container{
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
        .dark-mode #summary_container{
            box-shadow: 0 0 15px 5px rgba(43, 185, 199, 0.05);
            border: none;
        }
{% endblock %}
{% block content %}
    <div style="border-radius: 5px; padding: 40px;" id="summary_container" class="container mt-5">
        <h3 style="margin-bottom: 20px;" class="mt-4">Welcome to Your HAProxy Configurator. Here's A Short Summary:</h3>
        <p class="lead"><i style="margin: 8px;" class="fas fa-globe"></i> <strong>{{ frontend_count }}</strong> frontends</p>
        <p class="lead"><i style="margin-right: 8px;" class="fas fa-sitemap"></i> <strong>{{ backend_count }}</strong> backends</p>
        <p class="lead"><i style="margin: 8px;" class="fas fa-user-lock"></i> <strong>{{ acl_count }}</strong> acl's</p>
        <p class="lead"><i style="margin: 8px;" class="fas fa-code"></i> <strong>{{ layer7_count }}</strong> layer7(mode http) loadbalanced frontends</p>
        <p class="lead"><i style="margin: 8px;" class="fas fa-network-wired"></i> <strong>{{ layer4_count }}</strong> layer4(mode tcp)loadbalanced frontends</p>
        <div class="mt-4">
            <a href="/" class="btn btn-primary"><i style="margin: 8px;" class="fas fa-plus"></i>Add New Frontend/Backend</a>
        </div>
    </div>
{% endblock %}