<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Programs</title>

    <link rel="apple-touch-icon" sizes="180x180" href="/fm/assets/img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/fm/assets/img/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/fm/assets/img/favicon/favicon-16x16.png">
    <link rel="manifest" href="/fm/assets/img/favicon/site.webmanifest">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" href="/fm/css/curr_live_programs.css">
</head>
<body>
    <div>
        <h1>
            Currently LIVE Streaming:
        </h1>
        <% if(currLive.length===0){ %>
        <div class="empty">
            <svg xmlns="http://www.w3.org/2000/svg" width="10rem" height="10rem" fill="rgba(255, 255, 255, 0.564)" class="bi bi-emoji-frown" viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                <path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
              </svg>
            <h2>Sorry, no program is being LIVE streamed !</h2>
        </div>
        <% } else{ %>
        <div class="programs-grid">
            <% currLive.forEach(function(prg){ %>
                <div class="program">
                    <form action="/fm/join_live" method="post">
                        <button>
                            <input type="hidden" name="eventName" value="<%= prg %>">
                            <img src="/fm/data/programPics/<%= prg %>.jpg" alt="">
                            <p><%= prg %></p>
                        </button>
                    </form>
                </div>
            <% }); %>
        </div>
        <% } %>
    </div>
</body>
</html>