<html>

<head>
    <%- include('./partials/head.ejs') %>
    <link rel='stylesheet' href='/style/contentPage.css'>
    <link rel='stylesheet' href='/style/slideshow.css'>
    <script src="/scripts/slideshows.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <style>
        .material-symbols-outlined {
          font-variation-settings:
          'FILL' 0,
          'wght' 400,
          'GRAD' 0,
          'opsz' 24
        }
    </style>
</head>

<body>
    <% if (is_mobile) { %>
        <%- include('./partials/mobileNav.ejs') %>
    <% } else { %>
        <%- include('./partials/desktopNav.ejs') %>
    <% } %>

    <div id="pageContainer">
        <main id="contentWrap">

            <!-- [content] -->
            <!-- TOP -->
            <div class="element centerVert">
                <div class="flex-double">
                    <div class="flexContent flex-column text">
                        <h2>Boka våra lokaler</h2>
                        <h4>Lokaler för alla slags aktiviteter</h4>
                        <p>Vi har lokaler för alla tänkbara möten. Från det lilla föreningsmötet för 8-10 personer till den stora föreläsningen för 250 personer. Lokalerna kan även användas till stora eller små middagsbjudningar. Bjud upp till dans på vårt stora dansgolv i Häverösalen.</p>
                            <div class="textSep2"></div>
                        <p>Våra två stora salar, Häverösalen och Edebosalen, är åtskiljda av en vikvägg som när den öppnas upp ger möjigheter för stora sammankomster. </p>
                            <div class="textSep2"></div>
                        <p>I huset finns <a href="/unes-kok-bar">Unes Kök & Bar</a> som kan servera fika, luncher och middagar för alla deltagare.</p>
                    </div>
                    <div class="flexContent image large">
                        <img src="/images/BL/base.jpg">
                    </div>
                </div>
            </div>

            <!-- Häverö -->
            <div class="element flex-double minHeight50 flexCenter">
                <div class="flexContent flex-column text">
                    <h2>Häverösalen</h2>
                    <p>Häverösalen är vår största lokal för konferens, fester och större sammankomster. Den ligger i anslutning till Häveröbaren med sitt kök och kan också kopplas ihop med Edebosalen.</p>
                    <div class="textSep2"></div>
                    <p>I Häveröbaren finns diskmaskin och köksutrustning, stora kaffebryggare och stor kyl. Samt en serveringsdisk. Hyra för Häveröbaren tillkommer.</p>
                    <div class="textSep4"></div>
                    <p>Utrustning:<br>Hörselslinga, mikrofoner, både trådlöst och med sladd, CD spelare och över dansgolvet finns det en ljusorgel.</p>
                    <div class="textSep4"></div>
                    <p>Mått:<br>Yta: 294 kvm<br>Takhöjd: 3 m</p>
                    <div class="textSep4"></div>
                    <p>Vid standardmöbleringen i Häverösalen finns plats för 80 personer, med restaurangsittning finns plats för 120 personer. Andra möbleringar kan till exempel vara skolsittning för ca 150 personer eller biosittning för ca 200 personer.</p>
                </div>
                <div class="slideshow" id="slideshow01" data-slideshow-index="0">
                    <div class="imageContainer" role="img" alt="Bildspel av bilder från Höverösalen">
                        <div class="slideshowImage duplicate" data-src="/images/BL/Häverö/07.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Häverö/01.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Häverö/02.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Häverö/03.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Häverö/04.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Häverö/05.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Häverö/06.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Häverö/07.jpg"></div>
                        <div class="slideshowImage duplicate" data-src="/images/BL/Häverö/01.jpg"></div>
                    </div>
                    <div class="slideshowButtonContainer">
                        <div class="slideshowButton left" onclick="leftClicked()">
                            <span class="material-symbols-outlined">
                                chevron_left
                            </span>
                        </div>
                        <div class="slideshowButton right" onclick="rightClicked()">
                            <span class="material-symbols-outlined">
                                chevron_right
                            </span>
                        </div>
                    </div>
                    <div class="slideshowSelection">
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_checked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                    </div>
                </div>
            </div>

            <!-- Edebo -->
            <div class="element flex-double minHeight50 flexCenter">
                <div class="flexContent flex-column text">
                    <h2>Edebosalen</h2>
                    <p>Edebosalen är vår näst största lokal. Den kan kopplas ihop med Häverösalen genom att öppna upp vikväggen mellan salarna. Edebosalen ligger även den i anslutning till Häveröbaren.</p>
                    <div class="textSep4"></div>
                    <p>Utrustning:<br>Whiteboard och filmduk. Projektor finns att hyra.</p>
                    <div class="textSep4"></div>
                    <p>Mått:<br>Yta: 119 kvm</p>
                    <div class="textSep4"></div>
                    <p>Vid möblering för skolsittning finns plats för 48 personer. Andra möbleringar som U-bord för ca 30 personer eller biosittning för ca 60 personer fungerar utmärkt.</p>
                </div>
                <div class="slideshow" id="slideshow02" data-slideshow-index="1">
                    <div class="imageContainer" role="img" alt="Bildspel av bilder från Edebosalen">
                        <div class="slideshowImage duplicate" data-src="/images/BL/Edebo/03.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Edebo/01.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Edebo/02.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Edebo/03.jpg"></div>
                        <div class="slideshowImage duplicate" data-src="/images/BL/Edebo/01.jpg"></div>
                    </div>
                    <div class="slideshowButtonContainer">
                        <div class="slideshowButton left" onclick="leftClicked()">
                            <span class="material-symbols-outlined">
                                chevron_left
                            </span>
                        </div>
                        <div class="slideshowButton right" onclick="rightClicked()">
                            <span class="material-symbols-outlined">
                                chevron_right
                            </span>
                        </div>
                    </div>
                    <div class="slideshowSelection">
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_checked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                    </div>
                </div>
            </div>

            <!-- Singö -->
            <div class="element flex-double minHeight50 flexCenter">
                <div class="flexContent flex-column text">
                    <h2>Singörummet</h2>
                    <p>Lokalen passar för den lilla konferensen eller utbildningen. Singö är en ljus hörnlokal med stora fönster i två riktningar.</p>
                    <div class="textSep4"></div>
                    <p>Utrustning:<br>Whiteboard och filmduk. Projektor finns att hyra.</p>
                    <div class="textSep4"></div>
                    <p>Mått:<br>Yta: 38 kvm</p>
                    <div class="textSep4"></div>
                    <p>Singö är standardmöblerat med 16 personer i U-bord. Med annan möblering finns plats för 24 personer.</p>
                </div>
                <div class="slideshow" id="slideshow03" data-slideshow-index="2">
                    <div class="imageContainer" role="img" alt="Bildspel av bilder från Singörummet">
                        <div class="slideshowImage duplicate" data-src="/images/BL/Singö/02.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Singö/01.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Singö/02.jpg"></div>
                        <div class="slideshowImage duplicate" data-src="/images/BL/Singö/01.jpg"></div>
                    </div>
                    <div class="slideshowButtonContainer">
                        <div class="slideshowButton left" onclick="leftClicked()">
                            <span class="material-symbols-outlined">
                                chevron_left
                            </span>
                        </div>
                        <div class="slideshowButton right" onclick="rightClicked()">
                            <span class="material-symbols-outlined">
                                chevron_right
                            </span>
                        </div>
                    </div>
                    <div class="slideshowSelection">
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_checked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                    </div>
                </div>
            </div>

            <!-- Ununge -->
            <div class="element flex-double minHeight50 flexCenter">
                <div class="flexContent flex-column text">
                    <h2>Unungerummet</h2>
                    <p>Vår minsta lokal som fungerar utmärkt för styrelsemötet eller andra mindre sammankomster.</p>
                    <div class="textSep4"></div>
                    <p>Utrustning:<br>Whiteboard och filmduk. Projektor finns att hyra.</p>
                    <div class="textSep4"></div>
                    <p>Mått:<br>Yta: 28 kvm</p>
                    <div class="textSep4"></div>
                    <p>Rummet är standardmöblerat för 12 personer.</p>
                </div>
                <div class="slideshow" id="slideshow04" data-slideshow-index="3">
                    <div class="imageContainer" role="img" alt="Bildspel av bilder från Unungerummet">
                        <div class="slideshowImage duplicate" data-src="/images/BL/Ununge/03.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Ununge/01.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Ununge/02.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Ununge/03.jpg"></div>
                        <div class="slideshowImage duplicate" data-src="/images/BL/Ununge/01.jpg"></div>
                    </div>
                    <div class="slideshowButtonContainer">
                        <div class="slideshowButton left" onclick="leftClicked()">
                            <span class="material-symbols-outlined">
                                chevron_left
                            </span>
                        </div>
                        <div class="slideshowButton right" onclick="rightClicked()">
                            <span class="material-symbols-outlined">
                                chevron_right
                            </span>
                        </div>
                    </div>
                    <div class="slideshowSelection">
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_checked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                    </div>
                </div>
            </div>

            <!-- Rosen -->
            <div class="element flex-double minHeight50 flexCenter">
                <div class="flexContent flex-column text">
                    <h2>Rosen</h2>
                    <p>Rosen är vår teater och biosalong. Här visas även direktsänd opera från Metropolitan i New York. Med sina 182 sittplatser passar Rosen också bra för föreläsningar och informationsträffar.</p>
                    <div class="textSep4"></div>
                    <p>Utrustning:<br>Grundläggande ljussättning för scenen, mikrofoner och ljudmixer. Möjlighet att hyra bioprojektor och 7.1 ljudsystem för större upplevelse.</p>
                    <div class="textSep4"></div>
                    <p>Mått:<br>Yta: 166 kvm<br>Scen: 8.5 x 5.5 m<br>Takhöjd: 5 m</p>
                    <div class="textSep4"></div>
                    <p>Till scenen hör även två loger.</p>
                </div>
                <div class="slideshow" id="slideshow05" data-slideshow-index="4">
                    <div class="imageContainer" role="img" alt="Bildspel av bilder från Bio Rosen">
                        <div class="slideshowImage duplicate" data-src="/images/BL/Rosen/03.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Rosen/01.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Rosen/02.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Rosen/03.jpg"></div>
                        <div class="slideshowImage duplicate" data-src="/images/BL/Rosen/01.jpg"></div>
                    </div>
                    <div class="slideshowButtonContainer">
                        <div class="slideshowButton left" onclick="leftClicked()">
                            <span class="material-symbols-outlined">
                                chevron_left
                            </span>
                        </div>
                        <div class="slideshowButton right" onclick="rightClicked()">
                            <span class="material-symbols-outlined">
                                chevron_right
                            </span>
                        </div>
                    </div>
                    <div class="slideshowSelection">
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_checked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                    </div>
                </div>
            </div>

            <!-- Skärsta -->
            <div class="element flex-double minHeight50 flexCenter">
                <div class="flexContent flex-column text">
                    <h2>Skärsta</h2>
                    <p>Lokalen ligger i vår källare och är åtkomlig även med kortnyckelsystem utifrån. Skärsta kan med fördel utnyttjas som kurslokal för kvällskurser.</p>
                    <div class="textSep4"></div>
                    <p>Utrustning:<br>Whiteboard</p>
                    <div class="textSep4"></div>
                    <p>Mått:<br>Yta: 30 kvm</p>
                    <div class="textSep4"></div>
                    <p>Kan möbleras efter behov till skolsittning eller möten med upp till 24 personer.</p>
                </div>
                <div class="slideshow" id="slideshow06" data-slideshow-index="5">
                    <div class="imageContainer" role="img" alt="Bildspel av bilder från Skärstarummet">
                        <div class="slideshowImage duplicate" data-src="/images/BL/Skärsta/03.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Skärsta/01.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Skärsta/02.jpg"></div>
                        <div class="slideshowImage" data-src="/images/BL/Skärsta/03.jpg"></div>
                        <div class="slideshowImage duplicate" data-src="/images/BL/Skärsta/01.jpg"></div>
                    </div>
                    <div class="slideshowButtonContainer">
                        <div class="slideshowButton left" onclick="leftClicked()">
                            <span class="material-symbols-outlined">
                                chevron_left
                            </span>
                        </div>
                        <div class="slideshowButton right" onclick="rightClicked()">
                            <span class="material-symbols-outlined">
                                chevron_right
                            </span>
                        </div>
                    </div>
                    <div class="slideshowSelection">
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_checked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                        <span class="material-symbols-outlined" onclick="selectionClicked()">radio_button_unchecked</span>
                    </div>
                </div>
            </div>

        </main>
        <%- include('./partials/footer.ejs') %>
    </div>
</body>

</html>