<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Islam Channel - Error</title>
<meta name="description" content="Default site description goes here." />
<link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/islamtv/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/islamtv/favicon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon/islamtv/favicon.png">
<link rel="mask-icon" href="/static/favicon/islamtv/favicon.png" color="#000000">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">


<meta property="og:title" content="Islam Channel - Error" />
<meta property="og:description" content="Default site description goes here." />
<meta property="og:image" content="https://assets.simplestreamcdn.com/default_thumbnail/missing-thumbnail.jpg" name="image" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://watch.islamchannel.tv/static/dist/css/app-0e8be23b.css" />
<meta property="og:site_name" content="Islam Channel" />


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="islamtv" />
<meta name="twitter:creator" content="@islamtv" />
<meta name="twitter:title" content="Islam Channel - Error" />
<meta name="twitter:description" content="Default site description goes here." />
<meta name="twitter:image" content="https://assets.simplestreamcdn.com/default_thumbnail/missing-thumbnail.jpg" />






<meta name="csrf-token" content="" />


<link rel="stylesheet" href="https://use.typekit.net/ech5qfu.css">


<script data-cookieconsent="ignore">
    const timezone = "Europe/London";
    const config = {"carousels":{"hero":{"default":{"loop":false,"keyboard":true,"autoplay":{"delay":5000},"effect":"slide","a11y":{"prevSlideMessage":"Previous slide","nextSlideMessage":"Next slide"},"preloadImages":false,"lazy":{"loadPrevNext":true},"lazyLoading":true,"lazyLoadingInPrevNext":true,"lazyLoadingInPrevNextAmount":1,"preloadImagesInSwiper":false,"lazyPreloadPrevNext":1,"slidesPerView":1,"spaceBetween":10,"direction":"horizontal","resizeObserver":true,"watchSlidesVisibility":true,"breakpoints":{"0":{"slidesPerView":1,"spaceBetween":50,"width":null,"direction":"horizontal"},"1000":{"slidesPerView":1,"spaceBetween":50,"width":950,"direction":"horizontal"},"1100":{"slidesPerView":1,"spaceBetween":50,"width":1050,"direction":"horizontal"},"1200":{"slidesPerView":1,"spaceBetween":50,"width":1150,"direction":"horizontal"},"2200":{"slidesPerView":2,"spaceBetween":50,"width":2150,"direction":"horizontal"},"2400":{"slidesPerView":2,"spaceBetween":50,"width":2300,"direction":"horizontal"}},"breakpointsBase":"window","breakpointsInverse":false},"gallery":{"maxBackfaceHiddenSlides":1,"loop":true,"loopAdditionalSlides":30,"keyboard":true,"autoplay":{"delay":5000},"effect":"coverflow","coverflowEffect":{"depth":100,"modifier":1,"rotate":50,"scale":1,"slideShadows":false,"stretch":0},"a11y":{"prevSlideMessage":"Previous slide","nextSlideMessage":"Next slide"},"preloadImages":false,"lazy":{"loadPrevNext":true},"lazyLoading":true,"lazyLoadingInPrevNext":true,"lazyLoadingInPrevNextAmount":1,"preloadImagesInSwiper":false,"lazyPreloadPrevNext":1,"slidesPerView":3,"spaceBetween":10,"direction":"horizontal","centerInsufficientSlides":true,"resizeObserver":true,"watchSlidesVisibility":true,"breakpoints":null,"breakpointsBase":"window","breakpointsInverse":false}},"default":{"watchOverflow":true,"loop":false,"loopedSlides":3,"keyboard":true,"dynamicBullets":true,"dynamicMainBullets":2,"effect":"slide","a11y":{"prevSlideMessage":"Previous slide","nextSlideMessage":"Next slide"},"preloadImages":false,"lazy":{"loadPrevNext":true},"lazyLoading":true,"lazyLoadingInPrevNext":true,"lazyLoadingInPrevNextAmount":1,"preloadImagesInSwiper":false,"lazyPreloadPrevNext":1,"slidesPerView":1,"spaceBetween":10,"direction":"horizontal","resizeObserver":true,"watchSlidesVisibility":true,"breakpoints":{"0":{"slidesPerView":2,"spaceBetween":5,"direction":"horizontal","slidesPerGroup":2},"576":{"slidesPerView":3,"spaceBetween":5,"direction":"horizontal","slidesPerGroup":3},"1024":{"slidesPerView":4,"spaceBetween":5,"direction":"horizontal","slidesPerGroup":4},"1500":{"slidesPerView":5,"spaceBetween":5,"direction":"horizontal","slidesPerGroup":5},"1900":{"slidesPerView":6,"spaceBetween":5,"direction":"horizontal","slidesPerGroup":6},"2100":{"slidesPerView":7,"spaceBetween":5,"direction":"horizontal","slidesPerGroup":7},"2400":{"slidesPerView":8,"spaceBetween":5,"direction":"horizontal","slidesPerGroup":8},"2700":{"slidesPerView":9,"spaceBetween":5,"direction":"horizontal","slidesPerGroup":9},"3000":{"slidesPerView":10,"spaceBetween":5,"direction":"horizontal","slidesPerGroup":10},"3500":{"slidesPerView":11,"spaceBetween":5,"direction":"horizontal","slidesPerGroup":11},"4000":{"slidesPerView":12,"spaceBetween":5,"direction":"horizontal","slidesPerGroup":12}},"breakpointsBase":"window","breakpointsInverse":false},"portrait":{"loop":false,"keyboard":true,"effect":"slide","a11y":{"prevSlideMessage":"Previous slide","nextSlideMessage":"Next slide"},"preloadImages":false,"lazy":{"loadPrevNext":true},"lazyLoading":true,"lazyLoadingInPrevNext":true,"lazyLoadingInPrevNextAmount":1,"preloadImagesInSwiper":false,"lazyPreloadPrevNext":1,"slidesPerView":1,"spaceBetween":10,"direction":"horizontal","resizeObserver":true,"watchSlidesVisibility":true,"breakpoints":{"0":{"slidesPerView":3,"spaceBetween":5,"direction":"horizontal"},"576":{"slidesPerView":4,"spaceBetween":5,"direction":"horizontal"},"1024":{"slidesPerView":5,"spaceBetween":5,"direction":"horizontal"},"1500":{"slidesPerView":6,"spaceBetween":5,"direction":"horizontal"},"1900":{"slidesPerView":8,"spaceBetween":5,"direction":"horizontal"},"2100":{"slidesPerView":9,"spaceBetween":5,"direction":"horizontal"},"2400":{"slidesPerView":10,"spaceBetween":5,"direction":"horizontal"},"2700":{"slidesPerView":11,"spaceBetween":5,"direction":"horizontal"},"3000":{"slidesPerView":12,"spaceBetween":5,"direction":"horizontal"},"3500":{"slidesPerView":13,"spaceBetween":5,"direction":"horizontal"},"4000":{"slidesPerView":14,"spaceBetween":5,"direction":"horizontal"}},"breakpointsBase":"window","breakpointsInverse":false}},"forms":[],"api":{"key":"5Bv0Kb2Kh1Vz8Es3Pn2Vb6Mr9Km4Vu","endpoints":{"metadata":"https:\/\/api.simplestreamcdn.com\/metadata\/v6","device":"https:\/\/api-auth-v3.ss7.tv\/api\/","authentication":"https:\/\/api.simplestreamcdn.com\/auth\/v3\/","cdn":"https:\/\/api.simplestreamcdn.com\/","heartbeat":"https:\/\/heartbeat-%s.simplestreamcdn.com","streams":"https:\/\/v2-streams-elb.simplestreamcdn.com\/streams","epg":"https:\/\/api.simplestreamcdn.com\/epg\/v2\/","internal":"https:\/\/"}},"environment":"production","cc":null};

    console.log(timezone);
</script>

<style>
        @media (min-width: 0px) {
        .layout-carousel-column {
            width: 50% !important;
            min-width: 50% !important;
            max-width: 100% !important;
        }
    }    @media (min-width: 576px) {
        .layout-carousel-column {
            width: 33.333333333333% !important;
            min-width: 33.333333333333% !important;
            max-width: 100% !important;
        }
    }    @media (min-width: 1024px) {
        .layout-carousel-column {
            width: 25% !important;
            min-width: 25% !important;
            max-width: 100% !important;
        }
    }    @media (min-width: 1500px) {
        .layout-carousel-column {
            width: 20% !important;
            min-width: 20% !important;
            max-width: 100% !important;
        }
    }    @media (min-width: 1900px) {
        .layout-carousel-column {
            width: 16.666666666667% !important;
            min-width: 16.666666666667% !important;
            max-width: 100% !important;
        }
    }    @media (min-width: 2100px) {
        .layout-carousel-column {
            width: 14.285714285714% !important;
            min-width: 14.285714285714% !important;
            max-width: 100% !important;
        }
    }    @media (min-width: 2400px) {
        .layout-carousel-column {
            width: 12.5% !important;
            min-width: 12.5% !important;
            max-width: 100% !important;
        }
    }    @media (min-width: 2700px) {
        .layout-carousel-column {
            width: 11.111111111111% !important;
            min-width: 11.111111111111% !important;
            max-width: 100% !important;
        }
    }    @media (min-width: 3000px) {
        .layout-carousel-column {
            width: 10% !important;
            min-width: 10% !important;
            max-width: 100% !important;
        }
    }    @media (min-width: 3500px) {
        .layout-carousel-column {
            width: 9.0909090909091% !important;
            min-width: 9.0909090909091% !important;
            max-width: 100% !important;
        }
    }    @media (min-width: 4000px) {
        .layout-carousel-column {
            width: 8.3333333333333% !important;
            min-width: 8.3333333333333% !important;
            max-width: 100% !important;
        }
    }
</style>


<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js" integrity="sha384-/vxhYfM1LENRhdpZ8dwEsQn/X4VhpbEZSiU4m/FwR+PVpzar4fkEOw8FP9Y+OfQN" crossorigin="anonymous"></script>
<link rel="preload" as="style" href="https://watch.islamchannel.tv/static/dist/css/app-a80cad19.css" /><link rel="modulepreload" href="https://watch.islamchannel.tv/static/dist/js/app-5ae2ea12.js" /><link rel="modulepreload" href="https://watch.islamchannel.tv/static/dist/js/js.cookie-edb2da2a.js" /><link rel="stylesheet" href="https://watch.islamchannel.tv/static/dist/css/app-a80cad19.css" /><script type="module" src="https://watch.islamchannel.tv/static/dist/js/app-5ae2ea12.js"></script>
<link href="/static/css/sites/islamtv.css" rel="stylesheet">






<script src="https://ssmp.simplestreamcdn.com/dist/builds/bitmovin/v1.1.32/ssmp.bundle.js?plugins=youbora,ima"></script>



<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('padlock', {
            showPadlock: false,
            loaded: false,
            loading: false,

            async fetchStatus() {
                if (this.loaded || this.loading) return;

                this.loading = true;
                try {
                    const response = await fetch('/padlock-status', { credentials: 'include' });
                    const data = await response.json();
                    this.showPadlock = data.show;
                    this.loaded = true;
                } catch (error) {
                    console.error('Error fetching padlock status:', error);
                } finally {
                    this.loading = false;
                }
            }
        });
    });
</script>

    
                        <script>const appsflyer = false;</script>
                                <script>const sourcepoint = false;</script>
            
    
    </head>

<body class="d-flex flex-column" style="min-height: 100vh;" >

<div
        id="loading"
        x-data="{show:false}"
        x-on:toggle-spinner.window="show=$event.detail"
        :style="{'flex':show, 'none':!show}"
        :class="show ? '' : 'htmx-indicator'"
        class="backdrop-blur-sm"
>
    <div class="loader">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<style>
    main > * {
        width: 100%;
    }
</style>

<div class="d-flex flex-column">
        </div>

<main
        class="position-relative d-flex flex-column flex-shrink-0 flex-1 flex-grow-1 mw-100 overflow-hidden logged-out"
        style="flex: 1 0 0%; max-width: 100%; overflow-x: hidden;"
        x-data="{
                auth: Auth(),
                init () {
                                            this.auth.account.entitlements()
                                    }
            }"
>
    
    
                
    
    <div class="d-flex align-items-center h-100">

        <div class="component message container-fluid text-center error-errorBlade">
            <p><i class="bi bi-exclamation-circle" style="font-size: 200px;"></i></p>
            <p>Sorry! An error occurred.</p>
            <p>
                                Could Not Detect Country Code
            </p>
        </div>

    </div>


</main>


<div id="clicker">
    <div></div>
</div>



<div
    @jsmodal.window="interact"
    @jsmodalopen.window="open"
    @jsmodalclose.window="close"
    @jsmodalpopulate.window="populate"
    x-data="{
        el: null,
        default: {
            title: { text: '', style: null, class: null, },
            message: { text: '', style: null, class: null, },
            accept: {
                ...{ text: '', style: null, class: null, },
                class: 'btn btn-primary w-100 mb-2',
                click: (e) => {console.log('clicked')},
            },
            decline: {
                ...{ text: '', style: null, class: null, },
                class: 'btn btn-action w-100 mb-2',
                click: (e) => {console.log('clicked')},
            }
        },
        content: {
            title: { text: '', style: null, class: null, },
            message: { text: '', style: null, class: null, },
            accept: {
                ...{ text: '', style: null },
                class: 'btn btn-primary w-100 mb-2',
                click: (e) => {console.log('clicked')},
            },
            decline: {
                ...{ text: '', style: null },
                class: 'btn btn-action w-100 mb-2',
                click: (e) => {console.log('clicked')},
            }
        },
        modal: BSModal(),
        reset() {
            this.content = this.default;
        },
        populate(data) {
            lodash().merge(this.content, data);
        },
        interact(event) {
            if(event.detail?.reset || typeof event.detail.reset == 'undefined') {
                this.reset();
            }

            if(event.detail?.content) {
                this.populate(event.detail.content);
            }

            if(event.detail?.open) {
                this.modal.open();
            }
        }
    }"
    x-init="
        el = $el;
        modal.el = $el;
        modal.init();
    "
    class="modal fade"
    id="jsmodal"
    tabindex="-1"
    aria-labelledby="jsmodalLabel"
    aria-hidden="true"
>
    <div class="modal-dialog w-100 modal-dialog-centered" style="max-width: 613px;">
        <div class="modal-content text-center" style="background: #18151B; border-radius: 8.77px!important">
            <div
                x-show="content.title.text || content.message.text"
                class="modal-body"
            >
                <h3
                    x-show="content.title.text"
                    x-text="content.title.text"
                    :class="content.title.class"
                    style="font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 24px; padding: 15px;"
                ></h3>
                <p
                    x-show="content.message.text"
                    x-text="content.message.text"
                    :class="content.message.class"
                    style="font-size: 20px; font-weight: 500; color: #fff;"
                ></p>
            </div>
            <div
                x-show="content.accept.text || content.decline.text"
                class="modal-footer row px-4"
            >
                <button
                    x-show="content.accept.text"
                    x-text="content.accept.text"
                    class="w-75 col"
                    :class="content.accept.class"
                    x-on:click="modal.close(); content.accept.click($event, $el)"
                    action="continue"
                    style="font-size: 20px; font-weight: 700; margin-left: 20px;"
                >
                </button>
                <button
                    x-show="content.decline.text"
                    x-text="content.decline.text"
                    class="w-75 col"
                    :class="content.decline.class"
                    x-on:click="modal.close(); content.decline.click($event, $el)"
                    action="cancel"
                    type="button"
                    data-dismiss="modal"
                    style="font-size: 20px; font-weight: 700; margin-right: 20px;"
                >
                </button>
            </div>
        </div>
    </div>
</div>

<div
    x-data="{
        position:'left',
        notifications: [
        ],
        add(e) {
            this.notifications.push({
                id: (Math.random() + 1).toString(36).substring(2),
                type: e.detail.type,
                content: e.detail?.message ?? e.detail?.content,
            });

            if(e.detail?.position){
                this.position = e.detail.position
            }
        },
        remove(notification) {
            this.notifications = this.notifications.filter(i => i.id !== notification.id)
        },
    }"
    :style="position === 'center' ? {left:'50%', transform: 'translateX(-50%)' } : {}"
    @notify.window="add($event)"
    class="d-flex position-absolute justify-content-center items-center gap-2 w-100"
    style="
        z-index: 10001;
        flex-direction: column;
        top: 5vh;
        width:100%;
    "
    role="status"
    aria-live="polite"
>
    <div class="mx-auto d-grid gap-1" style="max-width: 400px; width:100%;">
    <!-- Notification -->
    <template x-for="notification in notifications" :key="notification.id">
        <div
                :id="notification.id"
                x-data="{
                    show: false,
                    init() {
                        this.$nextTick(() => this.show = true)
                        setTimeout(() => this.dismiss(), (this.notification.content.length * 100) + 1000)
                    },
                    dismiss() {
                        this.show = false
                        setTimeout(() => this.remove(this.notification), 500)
                    }
                }"
                x-cloak
                class="d-flex flex-row flex align-items-center gap-4 notification-item px-3 py-2"
                x-transition.duration.500ms
                x-show="show"
                :class="{ 'notification-success': notification?.type==='success', 'notification-danger': notification?.type==='danger' }"
                style="max-width: 400px; width:100%; margin-left: -12px;"
        >
            <p style="flex: 1" x-html="notification.content" class="mb-0"></p>
            <button x-on:click="dismiss" class="bg-transparent border-0 text-white p-0" style="margin: 0">
                <svg aria-hidden width="24" stroke="1" height="24" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
                <span class="sr-only">Close notification</span>
            </button>
        </div>
    </template>
    </div>
</div>



</body>
</html>
