<html>
<head>
<title>Stashr - Reading - {{ comic_name }}</title>

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/stashr.css') }}">

<link rel="stylesheet" href="{{ url_for('static', filename='css/all.css') }}">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />

</head>

<body class="stashrRead">

<div id="app">
    <swiper v-bind:slides='slides' v-swiper='$options.swiperOptions'></swiper>
    <modal></modal>
</div>

<div class="stashr-button_container_reader p-2">
    <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#modalRead">
        <i class="text-white fas fa-bars fa-2x"></i>
    </button>
</div>

<script>

Vue.directive('swiper', {
    inserted (el, binding, vnode) {
        console.log(binding.value)
        const myswiper = new Swiper(el, binding.value)
    },
    componentUpdates() {
        console.log('updated?')
    }
})

Vue.component('modal', {
    props: [],
    template: `
    <div class="modal" id="modalRead" tabindex="-1" role="dialog" aria-labelledby="modalRead" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Comic Settings</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Goto Page <input type="text" id="gotoPage" size="1" name="gotoPage" :value="this.$parent.active_page" />/[[ this.$parent.total_pages ]] <button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="goto_slide">GO</button>
                    {{ emit_tep("read_issue_page_modal_extension", issue_id=issue_id) }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click='mark_read'>Mark Read</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click='go_back'>Go Back</button>
                </div>
            </div>
        </div>
    </div>
    `,
    methods: {
        mark_read() {
            console.log('mark read')
            app.mark_read()
        },
        go_back() {
            window.history.back();
        },
        goto_slide() {
            app.goto_slide(document.getElementById("gotoPage").value)
        },
    },
    delimiters: ["[[","]]"]
})

Vue.component('slide', {
    props: ['slide'],
    template: `
    <div class="swiper-slide">
        <div class="swiper-zoom-container">
            <img :data-src="'{{ url_for('api.api_get_single_issue', issue_id=issue_id) }}/' + slide.path" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
    `,
    mounted() {
        var mySwiper = document.querySelector('.swiper-container').swiper
        mySwiper.update();
        mySwiper.lazy.load(0);
    },
    delimiters: ["[[","]]"]
})

Vue.component('swiper', {
    props: ['slides'],
    template: `
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <slide
                v-for="(slide, index) in slides"
                v-bind:slide="slide"
                v-bind:key="slide.id"
            ></slide>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    `,
    delimiters: ["[[","]]"]
})

var app = new Vue({
    el: '#app',
    data: {
        slides: [],
        active_page: 1,
        total_pages: 0
    },
    created() {
        axios.get('{{ url_for('api.api_get_single_issue', issue_id=issue_id) }}')
            .then(res => {
                this.slides = res.data.results;
                this.total_pages = res.data.results.length;
            })
            .catch(err => console.log(err))
    },
    swiperOptions: {
        slidesPerView: 1,
        keyboard: {
            enabled: true,
        },
        mousewheel: true,
        touches: {
            simulateTouch: false,
        },
        lazy: {
            lazy: true,
            loadPrevNext: true,
            loadPrevNextAmount: 2,
        },
        zoom: true,
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar',
        },
        on: {
            slideChange: function() {
                app.update_slide(this.activeIndex)
            }
        },
    },
    methods: {
        update_slide(index) {
            this.active_page = index + 1
        },
        goto_slide(page) {
            var mySwiper = document.querySelector('.swiper-container').swiper
            mySwiper.slideTo(page-1)
        },
        mark_read() {
            axios.put('{{ url_for('api.api_put_single_issue', issue_id=issue_id) }}', {
                data: {
                    read_status: 1
                }
            })
                .then(res=> {
                    window.history.back();
                }
                )
                .catch(err => console.log(err))
        }
    },
    delimiters: ["[[","]]"]
})
        
</script>

<script src="{{ url_for('static', filename='js/bootstrap.bundle.js') }}"></script>

</body>

</html>