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

<h1>Занимљивости</h1>

<p> Укупан број књига: <span class="text-primary">{{info.ukupno_knjiga}}</span></p>
<p> Укупан број страна: <span class="text-primary">{{info.ukupno_strana}}</span></p>
<p> Најстарија књига у библиотеци је из: <span class="text-primary">{{info.najstarija_knjiga}}. године</span></p>
<p> Најновија књига у библиотеци је из: <span class="text-primary">{{info.najnovija_knjiga}}. године</span></p>

<canvas id="panelZaZanrove" style="width:300px; height:50px"></canvas>

<script type="text/javascript"> 
    const imenaZanrova = [
        {% for zanr in info.zanrovi %}
            "{{zanr.zanr}}",
        {% endfor %}
    ];

    const brojKnjigaPoZanru = [
        {% for zanr in info.zanrovi %}
            "{{zanr.broj_knjiga_po_zanru}}",
        {% endfor %}
    ];


    const ctx = document.getElementById('panelZaZanrove').getContext('2d');
    const c = new Chart(ctx, {
        type: "bar",
        data: {
            labels: imenaZanrova,
            datasets: [{
                label: "Број књига по жанровима",
                data: brojKnjigaPoZanru,
                backgroundColor: "orange",
            }]
        }
    });

</script>

{% endblock %}