{% extends "base.html" %}

{% block header_script_files %}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% endblock %}

{% block header %}
{{ emit_tep('single_volume_page_header', volume_id=volume_id) }}
{% endblock %}

{% block content %}

<div id="app">
    <volume-jumbo v-bind:volume='volume' ref="volume"></volume-jumbo>
    <issues ref="issues" v-bind:issues='issues'></issues>
    <modals-volume v-bind:volume='volume' v-bind:ratings='ratings'></modals-volume>
    <modals-issue v-bind:issue='issue' v-bind:collections='collections'></modals-issue>
</div>

{% endblock %}

{% block modals %}
{{ emit_tep('single_volume_page_modals', volume_id=volume_id) }}
{% endblock %}

{% block button_container %}
{{ emit_tep('single_volume_page_button_container', volume_id=volume_id) }}
{% endblock %}

{% block script %}

Vue.component('collection-option', {
    props: ['collection'],
    template: `
    <option :value="collection.collection_id">[[ collection.collection_name ]]</option>
    `,
    delimiters: ["[[","]]"]
})

Vue.component('rating-option', {
    props: ['rating'],
    template: `
    <option :value="rating.rating_value">[[ rating.rating_long ]]</option>
    `,
    delimiters: ["[[","]]"]
})

Vue.component('modals-issue', {
    props: [
        'issue',
        'collections'
    ],
    template: `
    <div>
        <div class="modal" id="modalCollection" tabindex="-1" role="dialog" aria-labelledby="notesModal" 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="notesModalTitle">
                            Add to Collection
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="collectionName">Add To Collection</label>
                            <select ref="collectionselection" class="form-control" id="collectionName" @change='changeCollection'>
                                <option value='0'>+ Create New Collection</option>
                                <collection-option
                                    v-for='collection in collections'
                                    v-bind:collection='collection'
                                    v-bind:key='collection.collection_id'
                                ></collection-option>
                            </select>
                        </div>
                        <div id="newCollectionName" class="form-group" v-if="this.collection_id == '0'">
                            <label for="newCollection">New Collection Name</label>
                            <input ref="collectionName" type="email" class="form-control" id="newCollection" placeholder="New Collection Name">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button id="addToCollectionButton" type="button" class="btn btn-success" data-bs-dismiss="modal" @click='addToCollection'>Add to Collection</button>
                    </div>
                </div>
            </div>
        </div>
        {% if (current_user.role.lower() == 'admin') or
              (current_user.role.lower() == 'librarian') %}
        <div class="modal" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="deleteModal" 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="notesModalTitle">
                            Delete Issue
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="deleteIssueForm" action="{{ url_for('single_volume_page', volume_id=volume_id) }}" method="POST">
                        <div class="modal-body">
                            Are you sure you want to delete [[ issue.volume.volume_name ]] #[[ issue.issue_number ]]
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal" @click="deleteIssue">Delete</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="modal" id="modalUpload" tabindex="-1" role="dialog" aria-labelledby="deleteModal" 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="notesModalTitle">
                            Upload File
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="input-group mb-3">
                                <input id="fileupload" type="file" accept=".cbz, .cbr, .cb7, .cbt" name="comic" @change='uploadFile' required="required" class="form-control">
                              </div>
                              
                        </form>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        <div class="modal" id="modalAction" tabindex="-1" role="dialog" aria-labelledby="actionModal" 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="notesModalTitle">
                            <p>[[ issue.volume.volume_name ]] #[[ issue.issue_number ]]</p>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body center">
                        <span v-if="issue.issue_file_status">
                            <a id="actionHaveRead" class="btn btn-success my-1" :href="'/read/'+issue.issue_id">
                                <i class="fas fa-book-open"></i>
                                Read
                            </a>
                            {% if (current_user.role.lower() == 'admin') or
                                  (current_user.role.lower() == 'librarian') or
                                  (current_user.role.lower() == 'patron') %}
                            <a id="actionHaveDownload" class="btn btn-success my-1" :href="'/api/downloads/'+issue.issue_id">
                                <i class="fas fa-download"></i>
                                Download
                            </a>
                            {% endif %}
                            <hr />
                        </span>
                        <span v-if="!issue.issue_file_status">
                            {% if (current_user.role.lower() == 'admin') or
                                  (current_user.role.lower() == 'librarian') %}
                            <button id="actionMissingUpload" class="btn btn-success my-1" type="button" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#modalUpload">
                                <i class="fas fa-cloud-upload-alt"></i>
                                Upload to Server
                            </button>
                            <hr />
                            {% endif %}      
                        </span>
                        <span v-if="issue.issue_file_status">
                            <button id="actionHaveList" class="btn btn-info my-1" data-bs-dismiss="modal" v-on:click="addToReadingList">
                                <i class="fas fa-plus"></i>
                                Add to Reading List
                            </button>
                            <button id="actionHaveCollection" class="btn btn-info my-1" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#modalCollection">
                                <i class="fas fa-plus"></i>
                                Add to Collection
                            </button>
                            <hr />
                        </span>
                        <span>
                            <button id="actionHaveToggleRead" class="btn btn-info my-1" v-on:click="toggleReadStatus" data-bs-dismiss="modal">
                                <i class="fas fa-check"></i>
                                Toggle Read
                            </button>
                            <button id="actionHaveToggleOwned" class="btn btn-info my-1" v-on:click="toggleOwnedStatus" data-bs-dismiss="modal">
                                <i class="fas fa-book"></i>
                                Toggle Owned
                            </button>
                        </span>
                        <span v-if="issue.issue_file_status">
                            {% if (current_user.role.lower() == 'admin') or
                                  (current_user.role.lower() == 'librarian') %}
                            <hr />
                            <button id="actionHaveDelete" class="btn btn-danger my-1" type="button" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#modalDelete">
                                <i class="fas fa-trash-alt"></i>
                                Delete
                            </button>
                            {% endif %}
                        </span>
                        <span v-if="issue.issue_file_status">
                            {{ emit_tep("single_volume_page_issues_modal_have", volume_id=volume_id) }}
                        </span>
                        <span v-if="!issue.issue_file_status">
                            {{ emit_tep("single_volume_page_issues_modal_missing", volume_id=volume_id) }}
                        </span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `,
    data() {
        return {
            // collections: [],
            collection_id: 0,
            file: '',
        }
    },
    methods: {
        addToReadingList() {
            app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).addToReadingList()
        },
        addToCollection() {
            app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).addToCollection()
        },
        toggleReadStatus() {
            app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).toggleRead()
        },
        toggleOwnedStatus() {
            app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).toggleOwned()
        },
        changeCollection() {
            this.collection_id = this.$refs.collectionselection.value
        },
        deleteIssue() {
            app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).deleteIssue()
        },
        addToCollection() {
            if(this.collection_id == '0') {
                axios.post('{{ url_for('api.api_post_all_collections') }}', {
                    data: {
                        collection_name: this.$refs.collectionName.value,
                        issue_id: this.issue.issue_id
                    }
                })
                    .then(res => {
                        if (res.data.status_code == '200') {
                            app.refreshCollections();
                            stashrToast('Collection Created', 'success')
                        } else {
                            stashrToast(res.data.message, 'error')
                        }
                    })
                    .catch(err => console.log(err))
            } else {
                axios.post('{{ url_for('api.api_post_single_collection', collection_slug='COLLECTIONID') }}'.replace('COLLECTIONID', this.$refs.collectionselection.value), {
                    data: {
                        issue_id: this.issue.issue_id
                    }
                })
                    .then(res => {
                        if(res.data.status_code == '200') {
                            stashrToast('Added to Collection', 'success');
                        } else {
                            stashrToast(response.data.message, 'error')
                        }
                    })
                    .catch(err => console.log(err))
            }
        },
        uploadFile(){
            let formData = new FormData();
            var imagefile = document.querySelector('#fileupload');
            formData.append("file", imagefile.files[0]);
            bootstrap.Modal.getInstance(document.getElementById('modalUpload')).hide()
            stashrToast('Uploading Comic', 'info')
            axios.post('{{ url_for('api.api_post_single_issue', issue_id='ISSUEID') }}'.replace('ISSUEID', this.issue.issue_id), formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            })
                .then(res => {
                    if(res.data.status_code == 200) {
                        stashrToast('Issue Uploaded', 'success')
                        app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).toggleFile()
                        app.refreshVolumeInfo()
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
                .catch(err => {
                    stashrToast(err, 'error')
                })
        },
    },
    delimiters: ["[[","]]"]
})

Vue.component('modals-volume', {
    props: [
        'issue',
        'volume',
        'ratings'
    ],
    template: `
    <div>
        <div class="modal" id="modalInfo" tabindex="-1" role="dialog" aria-labelledby="infoModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">
                            [[ volume.volume_name ]]
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <span v-html="volume.volume_description"></span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        {% if (current_user.role.lower() == 'admin') or
              (current_user.role.lower() == 'librarian') %}
        <div class="modal" id="modalRemove" tabindex="-1" role="dialog" aria-labelledby="removeModal" 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">
                            Remove [[ volume.volume_name ]]
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Do you want to remove [[ volume.volume_name ]] from your library?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" @click="removeFromLibrary">Remove</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal" id="modalRatingEdit" tabindex="-1" role="dialog" aria-labelledby="ratingEditModal" 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="notesModalTitle">
                            Edit Rating
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="editRatingForm" action="{{ url_for('single_volume_page', volume_id=volume_id) }}" method="POST">
                        <div class="modal-body">
                            <select class="form-control" ref='ratingselection'>
                                <rating-option
                                    v-for="rating in ratings"
                                    v-bind:rating='rating'
                                    v-bind:key='rating.rating_id'
                                ></rating-option>
                            </select>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-success" data-bs-dismiss="modal" @click="updateVolumeRating">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    `,
    data() {
        return {
            collections: [],
            collection_id: 0,
            file: '',
        }
    },
    methods: {
        removeFromLibrary() {
            axios.delete('{{ url_for('api.api_delete_single_volume', volume_id=volume_id) }}')
                .then(res => {
                    window.location.replace("{{ url_for('all_volumes_page') }}");
                })
                .catch()
        },
        updateVolumeRating() {
            axios.put('{{ url_for('api.api_put_single_volume', volume_id=volume_id) }}', {
                data: {
                    volume_age_rating: this.$refs.ratingselection.value
                }
            })
                .then(res => {
                    if(res.data.status_code == '200') {
                        app.$refs.volume.volume.age_rating = app.ratings.filter(child =>  child.rating_value == this.$refs.ratingselection.value )
                        stashrToast('Updated Comic Rating', 'success')
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
                .catch(err => console.log(err))
        },
    },
    delimiters: ["[[","]]"]
})

Vue.component('volume-jumbo', {
    props: ['volume'],
    template: `
    <div class="row w-100 m-0">
        <div class='col-12 col-md-10 offset-md-1 p-2'>
            <div class='row'>
                <div class='col-12 col-md-2 p-2'>
                    <div class='row'>
                        <div class='col-10 offset-1'>
                            <!-- START POSTER -->
                            <div class="new-stashr_poster-wrapper border rounded">
                                <div class="stashr-poster_container rounded">
                                    <img class="stashr-poster_background w-100" src="/static/assets/cover.svg" id="poster-bg">
                                    <a class="rounded stashr-poster_link">
                                        <img class="rounded stashr-poster_image w-100" id="lazy-img" v-bind:src="'/images/volumes/'+volume.volume_id+'.jpg'" @error="$event.target.src=volume.volume_image_med">
                                    </a>
                                </div>
                            </div>
                            <!-- END POSTER -->
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-10 p-2">
                    <div class="row w-100 bg-light rounded m-0 p-4">
                        <div class="col-12 col-md-10">
                            <div class="row">
                                <div class="col text-center text-md-start">
                                    <h1 class="stashr-series_title">[[ volume.volume_name ]]</h1>
                                </div>
                            </div>
                            <div class="row text-center text-md-start">
                                <div class="col-12">
                                    <!-- START BADGES -->
                                    <span class="badge mx-1" v-bind:class="volumeStatus">[[ statusWord ]]</span>
                                    <span class="badge bg-info mx-1">[[ volume.age_rating[0].rating_long ]]</span>
                                    <span class="badge bg-info mx-1">[[ publisherName ]]</span>
                                    <span class="badge bg-info mx-1">[[ volume.volume_year ]]</span>
                                    <br>
                                    <span class="badge bg-primary mx-1">Digital: [[ volume.volume_have ]]/[[ volume.volume_total ]]</span>
                                    <span class="badge bg-primary mx-1">Physical: [[ ownedNumber ]]/[[ volume.volume_total ]]</span>
                                    <span class="badge bg-primary mx-1">Read: [[ readNumber ]]/[[ volume.volume_total ]]</span>
                                    <a class="badge bg-primary mx-1" :href="volume.volume_url" target="new">ComicVine</a>
                                    <br>
                                    {{ emit_tep('single_volume_page_badge_row', volume_id=volume_id) }}
                                    <!-- END BADGES -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col text-center text-md-start">
                                    <!-- START BUTTON -->
                                    <button class="btn btn-primary m-1" type="button" data-bs-toggle="modal" data-bs-target="#modalInfo">
                                        INFORMATION
                                    </button>
                                    {{ emit_tep('single_volume_page_button_row', volume_id=volume_id) }}
                                    <!-- END BUTTON -->
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-2 text-center text-md-right">
                            <!-- START NEW ACTIONS -->
                            <div class="dropdown">
                                <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="actionMenu" data-bs-toggle="dropdown" aria-expanded="false">
                                    Actions
                                </a>
                              
                                <ul class="dropdown-menu" aria-labelledby="actionMenu">
                                    {% if (current_user.role.lower() == 'admin') or
                                          (current_user.role.lower() == 'librarian') %}  
                                    <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalRatingEdit">
                                        <i class="far fa-sticky-note mx-1"></i>
                                        Edit Rating
                                    </a></li>
                                    <li><a class="dropdown-item" v-on:click="refreshVolume">
                                        <i class="fas fa-sync-alt mx-1"></i>
                                        Refresh
                                    </a></li>
                                    <li><a class="dropdown-item" v-on:click="toggleStatus">
                                        <span v-if="volume.volume_status">
                                            <i class="fas fa-stop mx-1"></i>
                                            Mark Ended
                                        </span>
                                        <span v-else>
                                            <i class="fas fa-play mx-1"></i>
                                            Mark Ongoing
                                        </span>
                                    </a></li>
                                    <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalRemove">
                                        <i class="fas fa-trash-alt mx-1"></i>
                                        Remove From Library
                                    </a></li>
                                    {% endif %}
                                    {{ emit_tep("single_volume_page_action_dropdown", volume_id=volume_id) }}
                                </ul>
                            </div>
                            <!-- END NEW ACTIONS -->
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    `,
    computed: {
        publisherName() {
            let pub_name = 'Not Defined';
            try {
                pub_name = this.volume.publisher.publisher_name;
            } finally {
                return pub_name;
            }
        },
        ownedNumber() {
            var read_issues = app.issues.filter(issue => issue.owned_status[0].owned_status == 1)
            return read_issues.length
        },
        readNumber() {
            var read_issues = app.issues.filter(issue => issue.read_status[0].read_status == 1)
            return read_issues.length
        },
        volumeNote() {
            let note = ''
            try { 
                note = this.volume.notes.volume_note;
            } finally { 
                return note; 
            };
        },
        volumeStatus() {
            let classname = 'bg-danger';
            if (this.volume.volume_status) {
                classname = 'bg-success'
            };
            return classname;
        },
        statusWord() {
            let status = 'Ended';
            if(this.volume.volume_status) {
                status = 'Ongoing';
            };
            return status;
        }
    },
    methods: {
        toggleStatus() {
            axios.put('{{ url_for('api.api_put_single_volume', volume_id=volume_id) }}', {
                data: {
                    volume_status: !this.volume.volume_status
                }
            })
                .then(res => {
                    if(res.data.status_code == '200') {
                        stashrToast('Status Updated', 'success')
                        this.volume.volume_status = !this.volume.volume_status
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
                .catch(err => console.log(err))
        },
        refreshVolume() {
            app.refreshVolume()
        },
        deleteSubscription() {
            axios.delete('{{ url_for('api.api_delete_single_volume', volume_id=volume_id) }}')
                .then(function(response) {
                    window.location.replace("{{ url_for('all_volumes_page') }}");
                })
                .catch(err => console.log(err))
        },
    },
    delimiters: ["[[","]]"]
})

Vue.component('issue-item', {
    props: ['issue'],
    template: `
    <li class='stashr-cover_size m-2'
        @mouseover="hover = true"
        @mouseleave="hover = false"
    >
        <div class='stashr-poster_wrapper rounded'>
            <div class="stashr-badge_tl badge rounded-pill bg-info border">[[ issue.issue_number ]]</div>
            <div class="stashr-badge_bl badge rounded-pill bg-dark border">
                <i class="fas fa-check" v-bind:class="statusFile"></i>
                <i class="fas fa-book" v-bind:class="statusOwned" v-on:click="toggleOwned"></i>
            </div>
            <div class="stashr-badge_br badge rounded-pill bg-dark border">
                <i class="fas fa-eye" v-bind:class="statusRead" v-on:click="toggleRead"></i>
            </div>
            <div class="stashr-poster_container border rounded">
                <div class="stashr-overlay_top w-100 center" v-if="hover" >
                    <!-- START BUTTONS -->
                    <span v-if="issue.issue_file_status">
                        <!-- HAVE -->
                        {% if (current_user.role.lower() == 'admin') or
                              (current_user.role.lower() == 'librarian') or
                              (current_user.role.lower() == 'patron') %}
                        <a :href="'/api/downloads/'+issue.issue_id" data-toggle='tooltip' data-placement="top" title="Download"><i class="text-primary px-1 fas fa-download"></i></a>
                        {% endif %}
                        <a :href="'/read/'+issue.issue_id" data-toggle="tooltip" title="Read"><i class="text-primary px-1 fas fa-book"></i></a>
                        <a v-on:click="addToReadingList" data-toggle="tooltip" title="Add to Reading List"><i class="text-primary px-1 fas fa-plus"></i></a>
                        <!--
                        <span data-toggle="tooltip" title="Delete">
                            <a data-bs-toggle="modal" data-bs-target="#modalDelete" :data-id="issue.issue_id" v-bind:data-number="issue.issue_number" >
                                <i class="text-primary px-1 fas fa-trash-alt"></i>
                            </a>
                        </span>
                        -->
                        {{ emit_tep("single_volume_page_top_overlay_have", volume_id=volume_id) }}
                    </span>
                    <span v-else>
                        <!-- MISSING -->
                        {% if (current_user.role.lower() == 'admin') or
                              (current_user.role.lower() == 'librarian') %}
                        <span data-toggle="tooltip" title="Upload to Server">
                            <a data-bs-toggle="modal" data-bs-target="#modalUpload" v-bind:data-issue_id=issue.issue_id v-bind:data-number=issue.issue_number >
                                <i class="text-primary px-1 fas fa-cloud-upload-alt"></i>
                            </a>
                        </span>
                        {% endif %}
                        {{ emit_tep("single_volume_page_top_overlay_missing", volume_id=volume_id) }}
                    </span>
                    <!-- END BUTTONS -->
                </div>
                <img class="stashr-poster_background w-100" loading="eager" src="/static/assets/cover.svg" />
                <a class="stashr-poster_link" data-bs-toggle="modal" data-bs-target="#modalAction" :data-volume_name=issue.volume.volume_name :data-issue_number=issue.issue_number :data-issue_id=issue.issue_id :data-issue_status=issue.issue_file_status v-on:click="this.changeModal">
                    <img class="w-100" loading="lazy" :src="'/images/issues/' + this.issue.issue_id + '.jpg'"  @error="$event.target.src=issue.issue_cover_url" />
                </a>
            </div>
        </div>
    </li>
    `,
    data() { return { hover: false, have: false, } },
    computed: {
        statusFile() {
            let classname = 'text-danger';
            if(this.issue.issue_file_status) {
                classname = 'text-success';
            };
            return classname;
        },
        statusOwned() {
            let classname = 'text-danger';
            try {
                if(this.issue.owned_status[0].owned_status) {
                    classname = 'text-success';
                }
            } catch {
                classname = 'text-danger';
            }
            return classname;
        },
        statusRead() {
            let classname = 'text-danger';
            try {
                if(this.issue.read_status[0].read_status) {
                    classname = 'text-success';
                }
            } catch {
                classname = 'text-danger';
            }
            return classname;
        },
    },
    methods: {
        toggleRead() {
            axios.put('{{ url_for('api.api_put_single_issue', issue_id='ISSUEID') }}'.replace('ISSUEID', this.issue.issue_id), {
                data: {
                    read_status: !this.issue.read_status[0].read_status
                }
            })
                .then(res => {
                    if(res.data.status_code == '200') {
                        stashrToast('Toggled Read Status', 'success')
                        this.issue.read_status[0].read_status = !this.issue.read_status[0].read_status;
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
                .catch(err => console.log(err))
        },
        toggleOwned() {
            axios.put('{{ url_for('api.api_put_single_issue', issue_id='ISSUEID') }}'.replace('ISSUEID', this.issue.issue_id), {
                data: {
                    owned_status: !this.issue.owned_status[0].owned_status
                }
            })
                .then(res => {
                    if(res.data.status_code == '200') {
                        stashrToast('Toggled Owned Status', 'success')
                        this.issue.owned_status[0].owned_status = !this.issue.owned_status[0].owned_status;
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
                .catch(err => console.log(err))
        },
        addToReadingList() {
            axios.post('{{ url_for('api.api_post_reading_list') }}', {
                issue_id: this.issue.issue_id
            })
                .then( res => {
                    if(res.data.status_code == '200') {
                        stashrToast('Added to Reading List', 'success')
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
                .catch(err => console.log(err))
        },
        imageError() {
            $event.target.src = 'shit'
        },
        addToCollection() {
            let collection = document.getElementById('collectionName').value
            if (collection == 0) {
                axios.post('{{ url_for('api.api_post_all_collections') }}', {  data: {
                    collection_name: document.getElementById('newCollection').value,
                    issue_id: this.issue.issue_id
                }})
                    .then(function(response) {
                        if (response.data.status_code == '200') {
                            stashrToast('Added to Collection', 'success')
                        } else {
                            stashrToast(response.data.message, 'error')
                        }
                    })
                    .catch(err => console.log(err))
            } else {
                axios.post('{{ url_for('api.api_post_single_collection', collection_slug='COLLECTIONID') }}'.replace('COLLECTIONID', collection), {
                    data: {
                        issue_id: this.issue.issue_id
                    }
                })
                .then(function(response){
                    if (response.data.status_code == '200') {
                        stashrToast('Added to Collection', 'success')
                    } else {
                        stashrToast(response.data.message, 'error')
                    }
                })
                .catch(err => console.log(err))
            }
        },
        changeModal() {
            app.changeModal(this.issue)
        },
        toggleFile() {
            this.issue.issue_file_status = 'true';
            app.$refs.volume.volume.volume_have = parseInt(app.$refs.volume.volume.volume_have) + 1
        },
        deleteIssue() {
            axios.delete('{{ url_for('api.api_delete_single_issue', issue_id='ISSUEID') }}'.replace('ISSUEID', this.issue.issue_id))
                .then( res=> {
                    if(res.data.status_code == 200) {
                        app.refreshVolumeInfo();
                        this.issue.issue_file_status = 0;
                        stashrToast('Issue Deleted', 'success')
                    }
                })
                .catch(err => console.log(err))
        },
    },
    delimiters: ["[[","]]"]
})

Vue.component('issues', {
    props: ['issues'],
    template: `
    <div>
        <ul class="d-flex flex-wrap w-100 m-0 p-0 justify-content-center">
            <issue-item
                v-for="issue in issues"
                v-bind:issue="issue"
                v-bind:key="issue.issue_id"
            ></issue-item>
        </ul>
    </div>
    `,
    delimiters: ["[[","]]"]
})

var app = new Vue({
    el: '#app',
    data: {
        volume: [],
        issues: [],
        issue: [],
        ratings: [],
        collections: [],
    },
    created() {
        this.getVolume();
        this.getIssues();
        this.getRatings();
        this.getCollections();
    },
    methods: {
        getVolume() {
            axios.get('{{ url_for('api.api_get_single_volume', volume_id=volume_id) }}')
                .then(res => {
                    if(res.data.status_code == '200') {
                        this.volume = res.data.results
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
                .catch(err => console.log(err))
        },
        getIssues() {
            axios.get('{{ url_for('api.api_get_single_volume_all_issues', volume_id=volume_id) }}', {
                params: {
                    offset: this.issues.length
                }
            })
                .then(res => {
                    if(res.data.number_of_page_results > 0) {
                        res.data.results.forEach(result => {
                            this.issues.push(result)
                        });
                        if(this.issues.length < res.data.number_of_total_results) {
                            this.getIssues();
                        }
                    }
                    this.issue = this.issues[0]
                })
                .catch(err => console.log(err))
        },
        changeModal(issue) {
            this.issue = issue
        },
        getRatings() {
            axios.get('{{ url_for('api.api_get_all_ratings') }}')
                .then(res => {
                    this.ratings = res.data.results;
                })
                .catch(err => console.log(err))
        },
        getCollections() {
            axios.get('{{ url_for('api.api_get_all_collections') }}')
                .then(res => {
                    if(res.status == '200') {
                        this.collections = res.data.results
                    } else {
                        stashrToast('Problem Retrieving Collections', 'error')
                    }
                })
                .catch(err => console.log(err))
        },
        refreshVolume() {
            axios.post('{{ url_for('api.api_post_single_volume', volume_id=volume_id) }}')
                .then(res => {
                    if(res.data.status_code == '200') {
                        this.refreshVolumeInfo();
                        this.refreshIssueInfo();
                        stashrToast('Updated Volume', 'success')
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
                .catch(err => console.log(err))
        },
        refreshCollections() {
            this.collections = [];
            this.getCollections();
        },
        refreshVolumeInfo() {
            this.volume = [];
            this.getVolume();
        },
        refreshIssueInfo() {
            this.issues = [];
            this.getIssues();
        },
    },
    delimiters: ["[[","]]"]
});

{{ emit_tep('single_volume_page_script', volume_id=volume_id) }}

{% endblock %}