<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,600;0,700;0,900;1,100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,300,0,0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= naslov %></title>
    <meta name="description" content="Lista dogadjaja koje je organizovao Blaster">
  <meta name="keywords" content="Banjaluka, techno, DJ, blaster, promocije, dogadjaji, events, label">
    <link rel="icon" type="image/png" href="/blasterLogo/Blaster-Logo-Favicon.png">
</head>
<body>
    <header id="heder">
        <div class="ostatakHedera">
            <a href="/"><img src="/blasterLogo/Blaster-Logo-Favicon.png" alt="logo"></a>
        <div>
             <a href="/dogadjaji">Događaji</a>
                 <a href="/izvodjaci">Izvođači</a>
                <a href="/podkesti">Podkasti</a>
                <a href="/o_nama">O nama</a>
        
        </div>
        <div class="navmenu">
            <input type="checkbox" name="hamburger" id="hamburger"></input>
            <label for="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </label>
            <div class="hamburgerovMeni">
                <a href="/dogadjaji">Događaji</a>
                 <a href="/izvodjaci">Izvođači</a>
                <a href="/podkesti">Podkasti</a>
                <a href="/o_nama">O nama</a>
        
            </div>
        </div>
        </div>
    </header>

    <section class="sekcijaOdDogadjaja">
        <br><br><br><br>
        <h2>Sljedeći događaji</h2>
        <div class="listanjeDogadjaja">
        <% if(buduciDogadjaji.length > 0){ %>
            <% for(let d of buduciDogadjaji){ %> 
            <a href="/dogadjaji/<%= d.id %>" class="zurkaKarticaKratka">
        <img src="<%= d.slika %>" alt="eventSlika">
        <input type="hidden" value="<%= d.id %>" name="id">
        <input type="hidden" value="<%= d.vrijeme %>" name="vrijeme">
        <div class="zurkaKarticaInfoKratka">
            <div>
                <p><%= d.vrijemeTekst %></p>
                <p><%= d.lokacija %></p>
            </div>
            <h3><%= d.naslov %></h5>
            <p><%= d.opis %></p>
        </div>
        </a>
        <% } %>
        <% } %>   
        </div>

        <h2>Prošli događaji</h2>
        <div class="listanjeDogadjaja">
            <% if(prosliDogadjaji.length > 0){ %>
                <% for(let d of prosliDogadjaji){ %> 
                <a href="/dogadjaji/<%= d.id %>" class="zurkaKarticaKratka">
            <img src="<%= d.slika %>" alt="eventSlika">
            <input type="hidden" value="<%= d.id %>" name="id">
            <input type="hidden" value="<%= d.vrijeme %>" name="vrijeme">
            <div class="zurkaKarticaInfoKratka">
                <div>
                    <p><%= d.vrijemeTekst %></p>
                    <p><%= d.lokacija %></p>
                </div>
                <h3><%= d.naslov %></h5>
                <p><%= d.opis %></p>
            </div>
            </a>
            <% } %>
            <% } %>   
        </div>
    </section>

    <footer>
        <div>
            <h4>Pronađi nas na</h4>
            <a href="https://www.instagram.com/blaster.banjaluka/" class="futerDugme">Instagram</a>
            <a href="https://www.facebook.com/blaster.banjaluka" class="futerDugme">Facebook</a>
            <a href="https://www.youtube.com/channel/UCZbjLoLJdBRFL7th-2bBNMA" class="futerDugme">Youtube</a>
            <a href="https://soundcloud.com/blaster-979775745" class="futerDugme">Soundcloud</a>
            <a href="https://blaster-bl.bandcamp.com/" class="futerDugme">Bandcamp</a>
        </div>
        <div>
            <h4>Meni</h4>
             <a href="/dogadjaji">Događaji</a>
                 <a href="/izvodjaci">Izvođači</a>
                <a href="/podkesti">Podkasti</a>
                <a href="/o_nama">O nama</a>
        
        </div>
        <div>
            <h4>Kontakt</h4>
            <a href="mailto:blaster.kontakt@gmail.com" class="futerDugme">Email</a>
        </div>
    </footer>
</body>
</html>

<script src="js/zatamniSkrolom.js"></script>