{% extends 'core/Vulnerable and Outdated Components/VulnerableOutdated.html' %}
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
{% block inside-content %}
    <div class="bg-white nav-item flex-grow bg-opacity-20 backdrop-filter backdrop-blur-md w-4/5 problems-container">
        <h1 class="text-center text-white font-bold pb-5">How do I know a Vulnerable or Outdated Component?</h1>

         <p class="text-white pb-3">
            Frameworks usually have their ways of checking and listing dependencies without users having to look for them manually.
             In python based frameworks, we can use the command:
        </p>

        <div class="flex flex-grow pt-3 pb-3">
            <pre><code class="text rounded-lg">pip freeze > requirements.txt

With result being:
asgiref==3.6.0
Django==4.1.6
django-appconf==1.0.5
django-compressor==4.3.1
django-crispy-forms==2.0
mysqlclient==2.1.1
rcssmin==1.1.1
rjsmin==1.2.1
sqlparse==0.4.3
tzdata==2022.7</code></pre>
        </div>

        <p class="text-white">
            Or .NET command:
        </p>

        <div class="flex flex-grow pt-3 pb-3">
            <pre><code class="cs rounded-lg">dotnet list [PROJECT|SOLUTION] package [--config SOURCE]</code></pre>
        </div>

        <p class="text-white pb-3">
            Or you can opt to check them manually in your project explorer.
        </p>
        <div class="flex m-auto pt-5 pb-5 px-4 rounded-xl" style="background-color: #2b2b2b">
            <img class="rounded-xl" src="/static/img/dependencies.png" alt=""/>
        </div>

        <p class="text-white pb-3 pt-3">
            Now that we know how to look for dependencies, let's look at how to see if they are outdated
            on the next page.
        </p>
    </div>
{% endblock %}
</html>