<template id="hud">
    <meta property="og:title" content="Photo HUD" />
    <meta property="og:image" content="./Providers/ClockProviders/custom-style/assets/hud_preview.png" />
    <meta name="author" content="Chclt" />
    <meta name="description" content="An example for Freedom Style clock, made with vaill HTML & CSS." />

    <link href="./Providers/ClockProviders/custom-style/assets/style_example.css" rel="stylesheet">

    <div class="container">
        <header>
            <div class="scene-logo">Scene</div>
            <div class="time-bar">
                <div class="date">
                    <span data-format="F"></span>
                    <span data-format="j"></span>
                    <span class="slash">/</span>
                    <span data-format="Y"></span>
                </div>
                <div data-format="l">
                </div>
                <div>
                    <span data-format="H"></span><span data-format=":"></span><span data-format="i"></span>
                </div>
                <div data-format="O"></div>
            </div>
            <div class="scene-logo" style="color: transparent;">Scene</div>
        </header>

        <div class="box">
            <div class="box-face box-face-front"></div>
            <div class="box-face box-face-left"></div>
            <div class="box-face box-face-right"></div>
            <div class="box-face box-face-top"></div>
            <div class="box-face box-face-bottom"></div>

            <div class="box-face box-face-inner">
                <span data-format="e"></span>
                <a href="https://scene-tab.com/docs/clocks/custom-style" target="_blank" class="guide-link">
                    <div class="guide-link-text">
                        <span>Learn To</span>
                        <span>Make Your</span>
                        <span>Own Clock</span>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="85" height="85" viewBox="0 0 85 85" fill="none">
                        <path
                            d="M30.5446 16.1046L65.5304 18.8812L68.3071 53.8671L54.0461 68.128L51.2695 33.1422L16.2837 30.3655L30.5446 16.1046Z"
                            fill="white" />
                        <rect x="48.5151" y="24.2576" width="15.8333" height="50.1387"
                            transform="rotate(45 48.5151 24.2576)" fill="white" />
                    </svg>
                </a>
            </div>
        </div>

        <div class="drag-container">
            <div class="drag-resize"></div>
            <div class="drag-content">
                <div class="window-header">Photo</div>
                <div class="window-body">
                    <div class="window-container">
                        <slot name="image">
                            <div
                                style="height: 100%; width: 100%; background: url('./Providers/ClockProviders/custom-style/assets/cai-fang-u0o-f-aFSDU-unsplash_compressed.jpg') center center / cover no-repeat;">
                            </div>
                        </slot>
                        <div class="photo-overlay"></div>
                    </div>
                    <span class="barcode">photo</span>
                </div>
            </div>
        </div>

        <footer>
            <div class="theme-selector">
                <label class="theme-selector-item" style="color: white;"></label>
                <label class="theme-selector-item" style="color: red;"></label>
                <label class="theme-selector-item" style="color: green;"></label>
                <label class="theme-selector-item" style="color: blue;"></label>
            </div>
            <div>
                <span data-format="B"></span>
            </div>
        </footer>
    </div>

    <style>
        :host {
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
            font-family: 'Press Start 2P', cursive;
        }

        .container {
            position: relative;

            width: 100%;
            height: 100%;

            color: #fff;
        }

        header {
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 2rem 3rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            mix-blend-mode: difference;
        }

        .time-bar {
            display: flex;
            gap: 3rem;
        }

        [data-format=":"] {
            animation: secondly-blink 2s step-end infinite;
        }

        @keyframes secondly-blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2rem 3rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        [data-format="B"] {
            mix-blend-mode: difference;
        }

        .theme-selector-item {
            display: block;
            width: 1rem;
            height: 1rem;
            position: relative;
            cursor: pointer;
        }

        .theme-selector-item::before {
            content: '';
            position: absolute;
            display: block;
            width: 100%;
            height: 50%;
            margin-block: 25%;
            background: currentColor;
        }

        .theme-selector-item::after {
            content: '';
            position: absolute;
            display: block;
            width: 50%;
            height: 100%;
            margin-inline: 25%;
            background: currentColor;
        }

        .theme-selector {
            display: flex;
            gap: 1rem;
        }

        .box {
            z-index: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            perspective: 100vw;
            transform-style: preserve-3d;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            transform-origin: center;
        }

        .box-face-front {
            transform: translateZ(-50vw);
        }

        .box-face-left {
            transform: translateX(-50vw) rotateY(90deg);
        }

        .box-face-right {
            transform: translateX(50vw) rotateY(-90deg);
        }

        .box-face-top {
            height: 100vw;
            transform: translateY(-50vh) rotateX(-90deg);
        }

        .box-face-bottom {
            height: 100vw;
            transform: translateY(50vh) rotateX(90deg);
        }

        .box-face-front,
        .box-face-left,
        .box-face-right,
        .box-face-top,
        .box-face-bottom {
            border: 1px solid #fff;
            background: linear-gradient(white 2px, transparent 0),
                linear-gradient(90deg, white 2px, transparent 0);
            background-size: 10vmin 10vmin, 10vmin 10vmin;
        }



        .box-face-inner {
            position: relative;
            transform: translateZ(-10vw);
        }

        [data-format="e"] {
            position: absolute;
            right: 2rem;
            top: 2rem;
            padding: 0.5rem 1rem;
            background: black;
            transform-origin: right bottom;
            transform: rotate(-90deg);
        }

        .guide-link {
            display: block;
            position: absolute;
            right: 2rem;
            bottom: 4rem;

            padding: 1.5rem 0.75rem 1.5rem 1.5rem;
            display: flex;
            gap: 1rem;
            background-color: black;

            text-decoration: none;
            color: white;
        }

        .guide-link-text {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .drag-container {
            position: absolute;
            display: inline-block;
        }

        .drag-resize {
            width: 10vw;
            height: 15vh;
            position: relative;
            resize: both;
            overflow: scroll;
            z-index: 1;
        }

        .drag-resize::-webkit-scrollbar {
            opacity: 0;
            background-color: transparent;
        }

        .drag-resize::-webkit-resizer {
            background-color: transparent;
        }


        .drag-content {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50vw;
            height: 70vh;
            transform: translate(100%, 100%);
            display: flex;
            flex-direction: column;
            border: 1px solid #fff;
            background: black;
        }


        .window-header {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #fff;
        }

        .window-body {
            flex: 1;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            align-items: end;
            overflow: hidden;
        }

        .window-container {
            flex: 1;
            width: 100%;
            position: relative;
        }

        .photo-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .barcode {
            font-family: 'Libre Barcode 39', cursive;
            font-size: 1.5rem;
            margin-bottom: -0.4em;
        }

        @media (max-width: 440px) {
            .scene-logo,
            .date,
            [data-format="l"],
            [data-format="O"] {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .date,
            [data-format="l"],
            [data-format="O"] {
                display: none;
            }
        }

        @media (max-width: 820px) {
            .slash,
            [data-format="Y"],
            [data-format="l"],
            [data-format="O"] {
                display: none;
            }
        }

        @media (max-width: 950px) {
            .slash,
            [data-format="Y"],
            [data-format="O"] {
                display: none;
            }
        }

        @media (max-width: 1050x) {
            .slash,
            [data-format="Y"] {
                display: none;
            }
        }
    </style>
</template>