{% extends "base.html.njk" %}

{% block header %}
    <style type="text/css">
        .status {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            column-gap: .6em;

            font-size: 1.5rem;
        }

        .status p {
            margin: 0;
            font-weight: bold;
            font-size: 1.2em;
        }

        #icon {
            width: 0.7em;
            height: 0.7em;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            position: relative;
        }

        .status.success {
            color: #2ecc71;
        }

        .status.error {
            color: #e74c3c;
        }

        .status.success #icon {
            background-color: #2ecc71;
        }

        .status.error #icon {
            background-color: #e74c3c;
        }

        .status.success #icon::before {
            content: "";
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #2ecc71;
            opacity: 0.3;

            position: absolute;
            top: 0;
            left: 0;

            transform: scale(2);

            animation: pulse 3s ease-out infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.6;
            }
            100% {
                transform: scale(2);
                opacity: 0;
            }
        }
    </style>
{% endblock %}

{% block main %}
    <h2>Am I Open</h2>

    <i>{{ ip }}</i>

    {% if isOpen %}
        <div class="status success">
            <div id="icon"></div>

            <p>Port <strong>{{port}}</strong> is open</p>
        </div>
    {% else %}
        <div class="status error">
            <div id="icon"></div>

            <p>Port <strong>{{port}}</strong> is closed</p>
        </div>
    {% endif %}
{% endblock %}