@page "/"
@using AliasVault.Components
@using AliasVault.Services
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Mvc.TagHelpers
@namespace AliasVault.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@inject VersionedContentService VersionService

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base href="~/"/>
    <link rel="stylesheet" href="@VersionService.GetVersionedPath("bootstrap/bootstrap.min.css")" />
    <link href="@VersionService.GetVersionedPath("app.css")" rel="stylesheet" />
    <link href="AliasVault.styles.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png"/>

    <!--Google web fonts-->
    <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=IBM+Plex+Mono:ital@0;1&family=Open+Sans:wght@300..800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />

    <!-- Core CSS -->
    <link rel="stylesheet" href="/assets/vendor/css/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="/assets/css/demo.css" />

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />

    <!-- Page CSS -->

    <!-- Helpers -->
    <script src="/assets/vendor/js/helpers.js"></script>

    <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
    <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
    <script src="/assets/js/config.js"></script>

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>
</head>
<body>
<component type="typeof(App)" render-mode="Server"/>

    <div id="components-reconnect-modal" class="aliasVault-reconnect-modal components-reconnect-hide">

        <!-- Show class content -->
        <div class="show">
            <div class="position-fixed top-0 end-0 bottom-0 start-0 d-flex align-items-center justify-content-center" style="background-color: rgba(0, 0, 0, 0.5);">
                <div class="card text-center p-5 shadow" style="max-width: 32rem;">
                    <p class="text-muted mb-4">
                        The connection to AliasVault has been lost. Reload the page to continue.
                    </p>
                    <button onclick="location.reload()" class="btn btn-primary">
                        Reload the page
                    </button>
                </div>
            </div>
        </div>

        <!-- Failed class content -->
        <div class="failed">
            <div class="position-fixed top-0 end-0 bottom-0 start-0 d-flex align-items-center justify-content-center" style="background-color: rgba(0, 0, 0, 0.5);">
                <div class="card text-center p-5 shadow" style="max-width: 32rem;">
                    <p class="text-muted mb-4">
                        The connection to AliasVault has been lost. Reload the page to continue.
                    </p>
                    <button onclick="location.reload()" class="btn btn-primary">
                        Reload the page
                    </button>
                </div>
            </div>
        </div>

        <!-- Rejected class content -->
        <div class="rejected">
            <div class="position-fixed top-0 end-0 bottom-0 start-0 d-flex align-items-center justify-content-center" style="background-color: rgba(0, 0, 0, 0.5);">
                <div class="card text-center p-5 shadow" style="max-width: 32rem;">
                    <p class="text-muted mb-4">
                        The connection to AliasVault has been lost. Reload the page to continue.
                    </p>
                    <button onclick="location.reload()" class="btn btn-primary">
                        Reload the page
                    </button>
                </div>
            </div>
        </div>

    </div>


<div id="blazor-error-ui">
    <environment include="Staging,Production">
        An error has occurred. This application may no longer respond until reloaded.
    </environment>
    <environment include="Development">
        An unhandled exception has occurred. See browser dev tools for details.
    </environment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

<script>
    window.clipboardCopy = {
        copyText: function (text) {
            navigator.clipboard.writeText(text).then(function () { })
                .catch(function (error) {
                    alert(error);
                });
        }
    };

    window.getFragment = () => {
    return window.location.hash;
    };

    window.navigateToUrl = (url) => {
      try {
          window.location.href = url;
          return true;
      } catch (error) {
          console.error(error);
          return false;
      }
    };

    window.isFunctionDefined = function(functionName) {
      return typeof window[functionName] === 'function';
    };
</script>

<!-- Core JS -->
<!-- build:js assets/vendor/js/core.js -->
<script src="/assets/vendor/libs/jquery/jquery.js"></script>
<script src="/assets/vendor/libs/popper/popper.js"></script>
<script src="/assets/vendor/js/bootstrap.js"></script>
<script src="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>

<script src="/assets/vendor/js/menu.js"></script>
<!-- endbuild -->

<!-- Vendors JS -->

<!-- Main JS -->
<script src="/assets/js/main.js"></script>

<!-- Page JS -->
<script src="_framework/blazor.server.js"></script>
</body>
</html>
