{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% import 'macro_functions.html.twig' as mf %}

{% block meta_title %}{{ 'IP lookup'|trans }}{% endblock %}

{% set active_menu = 'system' %}

{% block content %}
<div class="card">
    <div class="card-header">
        <div>
            <h3 class="card-title">{{ 'IP lookup'|trans }}</h3>
        </div>
    </div>
    <div class="card-body border-bottom">
        <span class="card-subtitle">{{ 'Lookup & discover info about IP addresses.'|trans }}</span>
    </div>
    <div class="card-body container">
        <form method="post" action="{{'api/admin/security/ip_lookup'|link({ 'CSRFToken': CSRFToken }) }}"
            class="api-form" data-api-jsonp="appendResult">
            <div class="d-flex">
                <input type="text" name="ip" class="form-control me-2" placeholder="{{ 'IP address to lookup'|trans }}" {% if request.ip %}value="{{ request.ip }}"{% endif %}>
                <button class="btn btn-primary" type="submit">{{ 'Submit'|trans }}</button>
            </div>
        </form>

        <div class="table-responsive mt-4">
            <table class="table table-striped" id="results">
                <thead>
                    <tr>
                        <th scope="col">{{ 'IP Address'|trans }}</th>
                        <th scope="col">{{ 'Country'|trans }}</th>
                        <th scope="col">ASN</th>
                        <th scope="col">{{ 'ASN Organization'|trans }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% if record %}
                    <tr>
                        <td>{{ record.ip.address }} ({{ record.ip.type }})</td>
                        <td>{{ record.country.flag }} {{ record.country.name }}</td>
                        <td>{{ record.asn.asnNumber }}</td>
                        <td>{{ record.asn.asnOrg }}</td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer text-center">
        <p>{{ 'ASN stands for autonomous system number. IP address info may not always be accurate.'|trans }}</p>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    function appendResult(result) {
        const tableBody = document.querySelector('#results tbody');
        const newRow = document.createElement('tr');

        const addressCell = document.createElement('td');
        addressCell.textContent =  `${result.ip.address} (${result.ip.type})`;

        const countryCell = document.createElement('td');
        countryCell.textContent = `${result.country.flag} ${result.country.name}`;

        const asnNumCell = document.createElement('td');
        asnNumCell.textContent = `${result.asn.asnNumber}`;

        const asnOrgCell = document.createElement('td');
        asnOrgCell.textContent = `${result.asn.asnOrg}`;

        newRow.appendChild(addressCell);
        newRow.appendChild(countryCell);
        newRow.appendChild(asnNumCell);
        newRow.appendChild(asnOrgCell);

        tableBody.insertBefore(newRow, tableBody.firstChild);
    }
</script>
{% endblock %}