{% extends "dashboard_layout.html" %}
{% block content %}
<div class="mb-5">
    <div class="text-center" style="margin-top: 3%; margin-bottom: 5%">
        <h1 id="vuln-name">Instructions</h1>
    </div>
    <div class="mt-3 container text-center">
        <p>
            <b>
                TIWAP (Totally Vulnerable Web Application Project) Web Application is designed for CyberSecurity enthusiasts
                who want to learn Web Application Security. This application includes various security levels (Low-Medium-High).
                You can change security levels to practice. The security level hardens the vulnerability level of TIWAP.
            </b>
        </p>
        <table style="text-align: center" class="mt-5">
            <thead>
                <tr>
                    <td style="width: 100px; text-align: center">
                        <p><b>Level</b></p>
                    </td>
                    <td style="width: 90%; text-align: center">
                        <p><b>Description</b></p>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="width: 100px; text-align: center">
                        <p>Low</p>
                    </td>
                    <td style="width: 90%; text-align: left">
                        <p>
                            This security level is completely vulnerable and has no security measures at all. We recommend
                            beginners to start with this level. This level is used as an example of how web application
                            vulnerabilities manifest through bad coding practices and to serve as a platform to teach or
                            learn very basic exploitation techniques.
                        </p>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px; text-align: center">
                        <p>Medium</p>
                    </td>
                    <td style="width: 90%; text-align: left">
                        <p>
                            At this level, basic security measures are taken to avoid the vulnerability but still it is not
                            totally secure, it can be bypassed. This setting is mainly to give an example to the user of
                            bad security practices, where the developer has tried but failed to secure an application.
                            It also acts as a challenge to users to refine their exploitation techniques.
                        </p>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px; text-align: center">
                        <p>Hard</p>
                    </td>
                    <td style="width: 90%; text-align: left">
                        <p>
                            This option is an extension to the medium difficulty. The developer tried to implement harder
                            and alternative security measures but again failed to completely secure the website. In this
                            level, the users need to refine their exploitation techniques and try harder to exploit the
                            vulnerability.
                        </p>
                    </td>
                </tr>
            </tbody>
        </table>
        <form action="/settings">
            <p><b>Current Security Level: {{ level }}</b></p>
            <label for="level"></label>
            <select id="level" name="level" class="btn btn-success" style="margin-right: 1%">
                <option value="low">Low</option>
                <option value="medium">Medium</option>
                <option value="hard">Hard</option>
            </select>
            <button class="btn btn-success" type="submit">Set Level</button>
        </form>
        <form action="/reset-db">
            <p><br><b>Reset the Database</b></p>
            <button class="btn btn-success" type="submit">Reset DB</button>
        </form>
        <h6 class="text-center text-muted mt-3">{{ msg }}</h6>
    </div>
</div>
{% endblock %}