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

{% block title %} Broken Access Control {% endblock %}

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

<div class="md:p-4 flex flex-col item-center">
    <ul class="
  nav nav-tabs nav-justified
  flex flex-col
  md:flex-row
  flex-wrap
  text-white
  list-none
  border-b-0
  pl-0">
        <li class="nav-item flex-grow text-center" role="presentation">
            <a href="/problems/broken_access/explanation" class="
      nav-link
      w-full
      block
      font-medium
      text-lg
      leading-tight
      uppercase
      border-x-0 border-t-0 border-b-2 border-transparent
      px-6
      py-2
      my-2
      hover:bg-opacity-10
      hover:bg-white
      rounded-full
      focus:border-transparent
      active
    ">Explanation</a>
        </li>
        <li class="nav-item flex-grow text-center" role="presentation">
            <a href="/problems/broken_access/showcase" class="
      nav-link
      w-full
      block
      font-medium
      text-lg
      leading-tight
      uppercase
      border-x-0 border-t-0 border-b-2 border-transparent
      px-6
      py-2
      my-2
      hover:bg-opacity-10
      hover:bg-white
      rounded-full
      focus:border-transparent
    ">Showcase</a>
        </li>
        <li class="nav-item flex-grow text-center" role="presentation">
            <a href="/problems/broken_access/countermeasures" class="
      nav-link
      w-full
      block
      font-medium
      text-lg
      leading-tight
      uppercase
      border-x-0 border-t-0 border-b-2 border-transparent
      px-6
      py-2
      my-2
      hover:bg-opacity-10
      hover:bg-white
      rounded-full
      focus:border-transparent
    ">Countermeasures</a>
        </li>
    </ul>
</div>

<div>
    {% block inside-content %}
    {% endblock %}
</div>
{% endblock %}