{% extends "osnovni_sablon.html" %}
{% block sadrzaj %}

<h1> Добро дошли на сајт библиотеке! </h1>

<figure>
  <blockquote class="blockquote">
    <p class="mb-0">Једино што увек треба да знаш је где је пут до библиотеке.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Алберт Аjнштајн
  </figcaption>
</figure>

<p>
  Учлани се у библиотеку попуњавањем формулара.
</p>

<form method="POST">
  
  <fieldset class="form-group">

    <legend>Основни подаци</legend>
    
    <div class="form-group">
      <label for="ime">Име:</label>
      <input type="text" class="form-control" id="ime" name="ime">
    </div>
    
    <div class="form-group">
      <label for="prezime">Презиме:</label>
      <input type="text" class="form-control" id="prezime" name="prezime">
    </div>
    
    <div class="form-group">
      <label for="razred">Разред:</label>
      <select class="form-select" id="razred" name="razred">
        <option value="-">-</option>
        <option value="1">први</option>
        <option value="2">други</option>
        <option value="3">трећи</option>
        <option value="4">четврти</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="odeljenje">Одељење:</label>
      <select class="form-select" id="odeljenje" name="odeljenje">
        <option value="-">-</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>

  </fieldset>
  
  <fieldset class="form-group">

    <legend>Колико књига месечно планираш да узимаш?</legend>
    
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="citanje" id="malo" value="malo" checked>
        1-3
      </label>
    </div>
    
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="citanje" id="srednje" value="srednje">
        4-5
      </label>
    </div>
    
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="citanje" id="puno" value="puno">
        више од 5
      </label>
    </div>

  </fieldset>

  <fieldset class="form-group">
    
    <legend>Пријави се за обавештења</legend>
    
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" name="nove-knjige" id="nove-knjige" value="nove-knjige">
        О новим књигама
      </label>
    </div>
    
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" name="vracanje" id="vracanje" value="vracanje">
        О роковима за враћање књига
      </label>
    </div>

  </fieldset>

  <br>

  <div class="form-group">
    <button type="submit" name="uclanjivanje" class="btn btn-primary">Учлани ме</button>
  </div>

</form>

{% for kategorija, poruka in get_flashed_messages(with_categories=true) %}
  <div>
    <hr>
    <p class="alert alert-{{kategorija}}">{{poruka}}</p>
  </div>
{% endfor %}

{% endblock %}