{% extends 'core/base.html' %}
{% load static %}

{% block title %} Problems {% endblock %}

{% block content %}
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <div class="p-10 grid grid-cols-3 2xl:grid-cols-4 place-items-center gap-4">

        <div class="max-w-sm rounded-lg hover:shadow-lg hover:shadow-white bg-gray-600 bg-opacity-50">
            <a href="/problems/broken_access/explanation">
                <img class="rounded-t-lg" src="\static\img\broken access.png" alt=""/>
            </a>
            <div class="p-5 text-center text-white">

                <h5 class="mb-2 text-2xl font-bold tracking-tight">Broken Access Control<br>&zwnj;</h5>

                <p class="mb-3 font-normal text-center">Be careful with your URLs, hidden dangers in easily overlooked
                    places.</p>

                <div class="pt-3">
                    <div class="p-1 rounded-full bg-gradient-to-r from-orange-500 to-yellow-400 inline-flex items-center font-medium">
                        <a href="/problems/broken_access/explanation"
                           class="bg-gray-700 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full">
                            Read More
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="max-w-sm rounded-lg hover:shadow-lg hover:shadow-white bg-gray-600 bg-opacity-50">
            <a href="/problems/injections/explanation">
                <img class="rounded-t-lg" src="\static\img\Injections.png" alt=""/>
            </a>
            <div class="p-5 text-center text-white">
                <h5 class="mb-2 text-2xl font-bold tracking-tight">Injections<br>&zwnj;</h5>
                <p class="mb-3 font-normal text-center">Nobody likes to leak data, so watch out and reinforce your
                    database.</p>
                <div class="pt-3">
                    <div class="p-1 rounded-full bg-gradient-to-r from-orange-500 to-yellow-400 inline-flex items-center font-medium">
                        <a href="/problems/injections/explanation"
                           class="bg-gray-700 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full">
                            Read More
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="max-w-sm rounded-lg hover:shadow-lg hover:shadow-white bg-gray-600 bg-opacity-50">
            <a href="/problems/cryptographic_failures/explanation">
                <img class="rounded-t-lg" src="\static\img\cf.png" alt=""/>
            </a>
            <div class="p-5 text-center text-white">
                <h5 class="mb-2 text-2xl font-bold tracking-tight">Cryptographic Failures<br>&zwnj;</h5>
                <p class="mb-3 font-normal text-center">Nobody likes their passwords seen, so let's make them
                    unreadable.</p>
                <div class="pt-3">
                    <div class="p-1 rounded-full bg-gradient-to-r from-orange-500 to-yellow-400 inline-flex items-center font-medium">
                        <a href="/problems/cryptographic_failures/explanation"
                           class="bg-gray-700 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full">
                            Read More
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="max-w-sm rounded-lg hover:shadow-lg hover:shadow-white bg-gray-600 bg-opacity-50">
            <a href="/problems/identification_authentication_failures/explanation">
                <img class="rounded-t-lg" src="\static\img\aif.png" alt=""/>
            </a>
            <div class="p-5 text-center text-white">
                <h5 class="mb-2 text-2xl font-bold tracking-tight">Identification and Authentication Failures</h5>
                <p class="mb-3 font-normal text-center">There are many secrets hidden in your URLs, so let's keep their
                    secrets.</p>
                <div class="pt-3">
                    <div class="p-1 rounded-full bg-gradient-to-r from-orange-500 to-yellow-400 inline-flex items-center font-medium">
                        <a href="/problems/identification_authentication_failures/explanation"
                           class="bg-gray-700 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full">
                            Read More
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="max-w-sm rounded-lg hover:shadow-lg hover:shadow-white bg-gray-600 bg-opacity-50">
            <a href="/problems/vulnerable_outdated_components/explanation">
                <img class="rounded-t-lg" src="\static\img\voc.png" alt=""/>
            </a>
            <div class="p-5 text-center text-white">
                <h5 class="mb-2 text-2xl font-bold tracking-tight">Vulnerable and Outdated Components</h5>
                <p class="mb-3 font-normal text-center">Careful of what's hidden in plain sight. Always check twice when
                    choosing your tools.</p>
                <div class="pt-3">
                    <div class="p-1 rounded-full bg-gradient-to-r from-orange-500 to-yellow-400 inline-flex items-center font-medium">
                        <a href="/problems/vulnerable_outdated_components/explanation"
                           class="bg-gray-700 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full">
                            Read More
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}