{% extends "drf_inspector/base.html" %}

{% block page_header %}
<div class="mb-8">
    <h2 class="text-4xl font-bold text-gray-800">
        Security Analyzer
    </h2>
    <p class="text-gray-500 mt-2">
        Review security configurations and identify potential vulnerabilities.
    </p>
</div>
{% endblock %}

{% block action_buttons %}
<div class="flex gap-3 mb-6 flex-wrap">
    <a
        href="{% url 'drf_inspector:export_json' %}"
        class="px-4 py-2 rounded-xl bg-gray-900 text-white text-sm"
    >
        Download JSON
    </a>
    <a
        href="{% url 'drf_inspector:export_markdown' %}"
        class="px-4 py-2 rounded-xl bg-white border text-sm"
    >
        Download Markdown
    </a>
</div>
{% endblock %}

{% block content %}

<!-- SEARCH -->
<input
    id="searchInput"
    type="text"
    placeholder="Search endpoint..."
    class="
        w-full
        p-3
        border
        rounded-xl
        mb-6
    "
>

<!-- ENDPOINTS -->

<div class="space-y-6">

    {% for item in endpoints %}

    <div class="
        endpoint-card
        bg-white
        rounded-2xl
        shadow
        p-6
    ">

        <!-- TOP -->

        <div class="
            flex
            justify-between
            items-start
            gap-4
            mb-4
        ">

            <div>

                <h2 class="
                    text-xl
                    font-bold
                ">
                    {{ item.view }}
                </h2>

                <div class="
                    text-blue-600
                    font-mono
                    break-all
                    mt-1
                ">
                    /{{ item.path }}
                </div>

            </div>


            <!-- STATUS -->

            {% if item.warnings %}

            <div class="
                bg-red-100
                text-red-700
                px-3
                py-2
                rounded-xl
                text-sm
                font-semibold
            ">
                WARNING
            </div>

            {% else %}

            <div class="
                bg-green-100
                text-green-700
                px-3
                py-2
                rounded-xl
                text-sm
                font-semibold
            ">
                SAFE
            </div>

            {% endif %}

        </div>


        <!-- METHODS -->

        <div class="mb-4">

            <div class="
                text-gray-500
                text-sm
                mb-2
            ">
                Methods
            </div>

            <div class="
                flex
                flex-wrap
                gap-2
            ">

                {% for method in item.methods %}

                <span class="
                    px-3
                    py-1
                    rounded-lg
                    bg-gray-200
                    text-sm
                    font-bold
                ">
                    {{ method }}
                </span>

                {% endfor %}

            </div>

        </div>


        <!-- PERMISSIONS -->

        <div class="mb-3">

            <span class="
                text-gray-500
            ">
                Permissions:
            </span>

            {% if item.permissions %}

                {% for permission in item.permissions %}

                <span class="font-semibold">
                    {{ permission }}
                </span>

                {% endfor %}

            {% else %}

                <span class="text-red-600">
                    None
                </span>

            {% endif %}

        </div>


        <!-- AUTH -->

        <div class="mb-3">

            <span class="
                text-gray-500
            ">
                Authentication:
            </span>

            {% if item.authentication %}

                {% for auth in item.authentication %}

                <span class="font-semibold">
                    {{ auth }}
                </span>

                {% endfor %}

            {% else %}

                <span class="text-red-600">
                    None
                </span>

            {% endif %}

        </div>


        <!-- THROTTLE -->

        <div class="mb-3">

            <span class="
                text-gray-500
            ">
                Throttling:
            </span>

            {% if item.throttle %}

                {% for throttle in item.throttle %}

                <span class="font-semibold">
                    {{ throttle }}
                </span>

                {% endfor %}

            {% else %}

                <span class="text-red-600">
                    None
                </span>

            {% endif %}

        </div>


        <!-- WARNINGS -->

        {% if item.warnings %}

        <div class="
            mt-4
            bg-red-50
            border
            border-red-200
            rounded-xl
            p-4
        ">

            <div class="
                font-bold
                text-red-700
                mb-2
            ">
                Security Warnings
            </div>

            <ul class="
                list-disc
                ml-6
                text-red-600
            ">

                {% for warning in item.warnings %}

                <li>
                    {{ warning }}
                </li>

                {% endfor %}

            </ul>

        </div>

        {% endif %}

    </div>

    {% endfor %}

</div>

<!-- SEARCH SCRIPT -->
<script>

    const searchInput =
        document.getElementById(
            "searchInput"
        )

    const cards =
        document.querySelectorAll(
            ".endpoint-card"
        )

    searchInput.addEventListener(
        "input",
        function () {

            const value =
                this.value.toLowerCase()

            cards.forEach(card => {

                if (
                    card.innerText
                    .toLowerCase()
                    .includes(value)
                ) {

                    card.style.display =
                        "block"

                }

                else {

                    card.style.display =
                        "none"
                }
            })
        }
    )

</script>

{% endblock %}