<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Starscout map</title>
        <link rel="icon" href="/images/site/app_icon.png">
                    <link rel="stylesheet" href="/css/bootstrap.5.3.0-alpha1.min.css" />
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" />
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css"/>
            <link rel="stylesheet" href="/css/main.css" />
                                    <script src="/js/jquery-3.6.3.min.js"></script>
            <script src="/js/bootstrap.5.3.0-alpha1.bundle.min.js"  crossorigin="anonymous"></script>
        
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?language=en&region=eu&key=AIzaSyB9Gatgc4PYYT6lPzw8ATlNbE-lOym2CjE&callback=initMap&v=weekly" defer></script>


    <script type="text/javascript" src="/js/map.js"></script>
    <script type="text/javascript">
        const permalinkBaseUrl = 'https://starscout.kodesoft.net/en/';
        const placeId = getPlaceIdFromQueryString(document.location);
        window.initMap = initMap;
    </script>
    </head>
    <body>
            <header class="d-flex flex-wrap justify-content-center py-3 border-bottom bg-black">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
        <i class="fs-4 bi-bookmark-star-fill text-white mx-4"></i>
        <span class="fs-3 text-white font-monospace">starscout </span>
        <span class="fs-3 text-white font-monospace">&nbsp;prod</span>
    </a>

    <ul class="nav" style="padding-right: 10px;">
        <li class="nav-item text-white dropdown dropstart">
            <a class="nav-link dropdown-toggle text-white" href="#" id="navbarLanguageDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="fi fi-gb" title="English"></span>
                                                                                                                        </a>
            <ul class="dropdown-menu dropdown-menu-sm dropdown-menu-dark text-white" aria-labelledby="navbarDropdownMenuLink">
                            <li>
                    <a href="/en/" class="nav-link small text-white dropdown-item" aria-current="page">
                        <span style="padding-left: 30px;" class="fi fi-gb" >English</span>
                    </a>
                </li>
                            <li>
                    <a href="/es/" class="nav-link small text-white dropdown-item" aria-current="page">
                        <span style="padding-left: 30px;" class="fi fi-es" >Spanish</span>
                    </a>
                </li>
                            <li>
                    <a href="/de/" class="nav-link small text-white dropdown-item" aria-current="page">
                        <span style="padding-left: 30px;" class="fi fi-de" >German</span>
                    </a>
                </li>
                        </ul>
        </li>
    </ul>
    <ul class="nav" style="padding-right: 10px;">
                    <li class="nav-item text-white" ><a href="/en/login" class="nav-link small" aria-current="page">Login</a></li>
            </ul>
</header>

    <input type="hidden" id="centerMapLabelTranslated" value="Center map"/>
    <input type="hidden" id="setCoordinatesOnMapTooltipText" value="Click on the map to set coordinates"/>
            <div id="flashesContainer" class="container-fluid">
    </div>

    <div id="mainContainer">
        <div id="mapContainer">
            <div id="map"></div>
        </div>

        <div id="filterContainer">
            <div class="mb-2">
                <button id="filterCollapseButton" class="btn btn-light" data-bs-toggle="collapse" data-bs-target="#filterCollapsable" type="button" aria-expanded="false" aria-controls="filterCollapsable">
                    Filters
                </button>
            </div>
            <div class="col-md-10 mx-auto col-lg-10 collapse" id="filterCollapsable">
                <form class="ml-3 py-3 px-3 bg-light">
                    <div class="mb-2">Filter sites by</div>
                    <div class="form-floating mb-2">
                        <select class="form-control form-control-sm form-select-sm filter-form-select py-1 pl-4" id="countryFilter" style="height:30px">
                            <option value="">Country</option>
                                                            <option value="DE">Germany</option>
                                                    </select>
                    </div>
                    <div class="form-floating mb-2">
                        <select class="form-select-sm form-control form-control-sm filter-form-multiselect pb-0"  multiple id="bortleFilter"  style="height:100px; padding-top: 10px;">
                            <option value="-1" disabled>Bortle index</option>
                                                            <option value="0">Unrated</option>
                                                            <option value="1">Class 1 (Excellent Dark Sky)</option>
                                                            <option value="2">Class 2 (Typical Dark Sky)</option>
                                                            <option value="3">Class 3 (Rural Sky)</option>
                                                            <option value="4">Class 4 (Suburban Sky)</option>
                                                            <option value="5">Class 5 (Bright Suburban Sky)</option>
                                                            <option value="6">Class 6 (Urban Sky)</option>
                                                            <option value="7">Class 7 (Inner-city Sky)</option>
                                                            <option value="8">Class 8 (Extremely Light-polluted Sky)</option>
                                                    </select>
                    </div>
                    <div class="mb-2">
                        <input class=" form-control form-control-sm filter-form-text" type="text" id="nameFilter" placeholder="Site name" value="" style="height:30px;"/>
                    </div>
                    <button style="height:30px; font-size: 11px" class="btn btn-sm btn-primary" type="button" id="filterPlacesButton">
                        Filter places</button>
                </form>
            </div>
        </div>

        <div id="infoContainer">
            <div class="nav nav-tabs" id="tabList" role="tablist">
                    <button class="nav-link active" id="info-tab" data-bs-toggle="tab" data-bs-target="#info" type="button" role="tab" aria-controls="info" aria-selected="true">Site info</button>
                    <button class="nav-link" id="images-tab" data-bs-toggle="tab" data-bs-target="#previewImagesTab" type="button" role="tab" aria-controls="previewImagesTab" aria-selected="false">
                        Site images</button>
                    <div class="nav-item" role="presentation" id="editLink"></div>
            </div>
            <div class="tab-content" id="tabContainer">
                <div class="tab-pane show active" id="info" role="tabpanel" aria-labelledby="info-tab">
                    <div id="placeInfoSpinner" class="d-flex justify-content-center hidden">
    <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
                    <div id="placeInfoContainer" >
                        <form  id="placeInfoForm" class="p-2">
                            <div id="placeInfoSubFormGroup" class="hidden">
                                <table class="table">
                                    <tr><td><strong>Name:</strong></td>   <td><span id="placeInfoName"></span></td></tr>
                                    <tr data-bs-toggle="tooltip" data-bs-placement="top" title="Click on the coordinates to switch display format"><td><strong>Lat/Lon:</strong></td><td><span id="placeInfoGeo"></span></td></tr>
                                    <tr><td><strong>Info:</strong></td>       <td><span id="placeInfoInfo"></span></td></tr>
                                    <tr><td><strong>Bortle:</strong></td>     <td><span id="placeInfoBortle"></span></td></tr>
                                    <tr><td><strong>Country:</strong></td>    <td><span id="placeInfoCountry"></span></td></tr>
                                    <tr><td><strong>State:</strong></td>      <td><span id="placeInfoState"></span></td></tr>
                                    <tr><td><strong>Town:</strong></td>       <td><span id="placeInfoTown"></span></td></tr>
                                    <tr><td><strong>Score:</strong></td>       <td><span id="placeInfoScore"></span></td></tr>
                                    <tr><td><strong>Permalink:</strong></td>       <td><span id="placeInfoShareLink">
                                                <button
                                                        data-action-label="Copy to clipbord"
                                                        data-confirmation-label="Copied"
                                                        class="btn btn-sm btn-secondary hidden" id="permalinkCopyButton" data-permalink-href="">Copy to clipbord</button>
                                            </span></td></tr>
                                </table>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="tab-pane" id="previewImagesTab" role="tabpanel" aria-labelledby="previewImagesTab-tab">
                    <div id="previewImagesContainer"></div>
                </div>
                <div class="tab-pane" id="editLinkTab" role="tabpanel" aria-labelledby="edit-tab"></div>
            </div>
        </div>
    </div>
    <div id="siteImageGalleryLightboxBackdrop">
        <button id="siteImageGalleryLightboxBackdropCloseButton" class="btn btn-light btn-close"><strong class="text-white" title="Close"></strong></button>
        <div id="siteImageGalleryLightboxContainer">
            <img id="siteImageGalleryLightboxImage" src="" alt=""/>
        </div>
    </div>
            <footer class="navbar d-flex flex-wrap justify-content-between align-items-center py-3 mt-4 border-top bg-black text-white">
    <div class="col-md-4 d-flex align-items-center text-white">
        <a href="/" class="mb-3 me-2 mb-md-0 text-decoration-none lh-1">
            <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
        </a>
        <span class="mb-3 mb-md-0 font-monospace">2023 KODESOFT</span>
    </div>
</footer>
    </body>
</html>
