<!--Verically centered modal-->
<div data-te-modal-init
    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
    id="modalShare" tabindex="-1" aria-labelledby="Share" aria-modal="true" role="dialog">
    <div data-te-modal-dialog-ref
        class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[50%] 2xl:min-[576px]:max-w-[25%]">
        <div
            class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
            <x-modal-header :title='__("Share {$episode->title} - {$episode->episode}")' />

            <!--Modal body-->
            <div class="relative p-4">
                <!-- Social Media -->
                @php
                    $currentUrl = url()->current();
                    $text = 'Watch ' . $episode->title . ' - ' . $episode->episode . ' in 4k on hstream.moe!';
                @endphp
                <div class="flex flex-wrap justify-stretch">
                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
                        target="_blank" rel="noopener"
                        href="https://facebook.com/sharer/sharer.php?u={{ $currentUrl }}"
                        aria-label="Share on Facebook" draggable="false">
                        <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 512 512" class="w-6 h-6">
                            <title>Facebook</title>
                            <path
                                d="M379 22v75h-44c-36 0-42 17-42 41v54h84l-12 85h-72v217h-88V277h-72v-85h72v-62c0-72 45-112 109-112 31 0 58 3 65 4z">
                            </path>
                        </svg>
                        <span class="ml-2">Facebook</span>
                    </a>
                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
                        target="_blank" rel="noopener"
                        href="https://twitter.com/intent/tweet?url={{ $currentUrl }}&amp;text={{ $text }}"
                        aria-label="Share on Twitter" draggable="false">
                        <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 512 512" class="w-6 h-6">
                            <title>Twitter</title>
                            <path
                                d="m459 152 1 13c0 139-106 299-299 299-59 0-115-17-161-47a217 217 0 0 0 156-44c-47-1-85-31-98-72l19 1c10 0 19-1 28-3-48-10-84-52-84-103v-2c14 8 30 13 47 14A105 105 0 0 1 36 67c51 64 129 106 216 110-2-8-2-16-2-24a105 105 0 0 1 181-72c24-4 47-13 67-25-8 24-25 45-46 58 21-3 41-8 60-17-14 21-32 40-53 55z">
                            </path>
                        </svg>
                        <span class="ml-2">Twitter</span>
                    </a>
                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
                        target="_blank" rel="noopener"
                        href="https://reddit.com/submit/?url={{ $currentUrl }}&amp;resubmit=true&amp;title={{ $text }}"
                        aria-label="Share on Reddit" draggable="false">
                        <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 512 512" class="w-6 h-6">
                            <title>Reddit</title>
                            <path
                                d="M440 204c-15 0-28 6-38 15-35-24-83-40-137-42l28-125 88 20c0 22 18 39 39 39 22 0 40-18 40-39s-17-40-40-40c-15 0-28 9-35 22l-97-22c-5-1-10 3-11 7l-31 138c-53 2-100 18-136 43a53 53 0 0 0-38-16c-56 0-74 74-23 100l-3 24c0 84 95 152 210 152 117 0 211-68 211-152 0-8-1-17-3-25 50-25 32-99-24-99zM129 309a40 40 0 1 1 80 0 40 40 0 0 1-80 0zm215 93c-37 37-139 37-176 0-4-3-4-9 0-13s10-4 13 0c28 28 120 29 149 0 4-4 10-4 14 0s4 10 0 13zm-1-54c-22 0-39-17-39-39a39 39 0 1 1 39 39z">
                            </path>
                        </svg>
                        <span class="ml-2">Reddit</span>
                    </a>
                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
                        target="_blank" rel="noopener"
                        href="https://wa.me/?text={{ $text }}%20{{ $currentUrl }}"
                        aria-label="Share on Whatsapp" draggable="false" style="">
                        <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 512 512" class="w-6 h-6">
                            <title>Whatsapp</title>
                            <path
                                d="M413 97A222 222 0 0 0 64 365L31 480l118-31a224 224 0 0 0 330-195c0-59-25-115-67-157zM256 439c-33 0-66-9-94-26l-7-4-70 18 19-68-4-7a185 185 0 0 1 287-229c34 36 56 82 55 131 1 102-84 185-186 185zm101-138c-5-3-33-17-38-18-5-2-9-3-12 2l-18 22c-3 4-6 4-12 2-32-17-54-30-75-66-6-10 5-10 16-31 2-4 1-7-1-10l-17-41c-4-10-9-9-12-9h-11c-4 0-9 1-15 7-5 5-19 19-19 46s20 54 23 57c2 4 39 60 94 84 36 15 49 17 67 14 11-2 33-14 37-27s5-24 4-26c-2-2-5-4-11-6z">
                            </path>
                        </svg>
                        <span class="ml-2">Whatsapp</span>
                    </a>
                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
                        target="_blank" rel="noopener"
                        href="https://telegram.me/share/url?text={{ $text }}&amp;url={{ $currentUrl }}"
                        aria-label="Share on Telegram" draggable="false">
                        <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 512 512" class="w-6 h-6">
                            <title>Telegram</title>
                            <path
                                d="M256 8a248 248 0 1 0 0 496 248 248 0 0 0 0-496zm115 169c-4 39-20 134-28 178-4 19-10 25-17 25-14 2-25-9-39-18l-56-37c-24-17-8-25 6-40 3-4 67-61 68-67l-1-4-5-1q-4 1-105 70-15 10-27 9c-9 0-26-5-38-9-16-5-28-7-27-16q1-7 18-14l145-62c69-29 83-34 92-34 2 0 7 1 10 3l4 7a43 43 0 0 1 0 10z">
                            </path>
                        </svg>
                        <span class="ml-2">Telegram</span>
                    </a>
                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
                        target="_blank" rel="noopener"
                        href="mailto:?subject={{ $text }}&amp;body={{ $currentUrl }}"
                        aria-label="Share by Email" draggable="false">
                        <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 512 512" class="w-6 h-6">
                            <title>Email</title>
                            <path
                                d="M464 64a48 48 0 0 1 29 86L275 314c-11 8-27 8-38 0L19 150a48 48 0 0 1 29-86h416zM218 339c22 17 54 17 76 0l218-163v208c0 35-29 64-64 64H64c-35 0-64-29-64-64V176l218 163z">
                            </path>
                        </svg>
                        <span class="ml-2">Email</span>
                    </a>
                </div>
                <br>
                <div class="flex">
                    <div>
                        <button id="copy-button" type="button" data-te-clipboard-init
                            data-te-clipboard-target="#copy-target" data-te-ripple-init data-te-ripple-color="light"
                            class="inline-block rounded border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out focus:bg-rose-600 focus:outline-none focus:ring-0 active:bg-rose-700">
                            Copy
                        </button>
                    </div>
                    <div class="relative mb-3 w-full" data-te-input-wrapper-init>
                        <input type="text"
                            class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-rose-700 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-rose-700 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
                            id="copy-target" value="{{ $currentUrl }}" readonly />
                    </div>

                </div>
                <div class="mb-[0.125rem] block min-h-[1.5rem] text-center">
                    <input class="w-4 h-4 text-rose-600 bg-gray-100 border-gray-300 rounded focus:ring-rose-500 dark:focus:ring-rose-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                        type="checkbox" value="" id="checkBoxStartAt" />
                    <label class="inline-block pl-[0.15rem] hover:cursor-pointer dark:text-white" for="checkBoxStartAt">
                        Start at current time
                    </label>
                </div>
                <script>
                    const checkbox = document.getElementById('checkBoxStartAt');
                    const urlInput = document.getElementById('copy-target');
                    const url = '{{ $currentUrl }}';
                    checkbox.addEventListener('change', (event) => {
                        if (event.currentTarget.checked) {
                            urlInput.value = url + "?t=" + parseInt(player.currentTime);
                        } else {
                            urlInput.value = url;
                        }
                    });
                </script>
            </div>
        </div>
    </div>
</div>
