{% extends 'base.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="{% static 'subject.css' %}">
{% endblock %}
{% block content %}
{% include 'navbar.html' %}
<div class="container d-flex justify-content-center">
    <div class="row mt-4 text-white"><h1>{{id}}</h1></div>
</div>

<div class="container">
    <div class="d-flex justify-content-center mt-5">
        <h3 class="text-white">Dodaj nowe zagadnienie</h3>
    </div>
<div class="d-flex justify-content-center mt-3">
    <form role="form">
        <input type="text" class="form-control" placeholder="Nowe zagadnienie" name="przedmiot">
    </form>
    <button type="button" class="btn btn btn-primary ml-1">Dodaj</button>
</div>
<div class="d-flex justify-content-center mt-5">
        <h3 class="text-white">Lista zagadnień</h3>
</div>
<a class="row justify-content-center">Liczba dostępnych zagadnień: 3/15</a>
<ul class="list-group cProductsList mt-3"> 
        <li class="list-group-item d-sm-flex justify-content-between"><p class="p-0 m-0 flex-grow-1">1. Podstawy sztucznej inteligencji</p> 
            <button class="btn-success mr-1">Edytuj</button>  <button class="btn-danger">Usuń</button>
        </li>
        <li class="list-group-item d-sm-flex justify-content-between"><p class="p-0 m-0 flex-grow-1">2. Jak dziala regresja liniowa</p>  
            <button class="btn-success mr-1">Edytuj</button>  <button class="btn-danger">Usuń</button>
        </li> 
        <li class="list-group-item d-sm-flex justify-content-between"><p class="p-0 m-0 flex-grow-1">3. Regresja liniowa, a logistyczna</p>  
            <button class="btn-success mr-1">Edytuj</button>  <button class="btn-danger">Usuń</button>
        </li> 
</ul>
</div>

{% endblock %}