<?php
namespace ONLINE_ADAv4;

wp_localize_script("fix_images_script", "oadaas_global", [
    "security" => wp_create_nonce('oadaas_security_nonce')
]);
?>

<div id="fix-images-container">
    <div class="oada-header">
        <h1>{{title}}</h1>
    </div>
    <div class="body">
        <div class="oada-options">
            <div>
                <div style="padding:10px 0px;" class="oada-header">Filter images: </div>
                <label style="font-size:16px;">
                    Show all 
                    <input type="radio" name="image-filter" checked="checked" value="all" @change="filter('all')"></label>
                <label style="font-size:16px;">
                    Show invalid 
                    <input type="radio" name="image-filter" value="invalid" @change="filter('invalid')">
                </label>
                <label style="font-size:16px;">
                    Show valid 
                    <input type="radio" name="image-filter" value="valid" @change="filter('valid')">
                </label>
            </div>
            <label>
                <span class="oada-header">Images per page: </span>
                <input type="number" min="1" max="100" name="page-length" v-model="pageLength" @input="update">
            </label>
        </div>
        
        <div v-if="show_invalid" class="oada-container invalid">
            <h2 class="oada-header">Invalid images</h2>
            <template v-for="(post, index) in invalid">
                <v-image-row :changes="modified[post.ID] || false" :key="post.ID" :post="post" @modified="catch_modified"></v-image-row>
            </template>
        </div>
        <v-create-pagination v-if="show_invalid" :valid="'invalid'" @page_change="page_change" :pages="invalid" :total_pages="total_invalid" :page_num="invalid_current_page" :page_length="pageLength"></v-create-pagination>

        <div v-if="show_valid" class="oada-container valid">
            <h2 class="oada-header">Valid images</h2>
            <template v-for="(post, index) in valid">
                <v-image-row :changes="modified[post.ID] || false" :key="post.ID" :post="post" @modified="catch_modified"></v-image-row>
            </template>
        </div>
        <v-create-pagination v-if="show_valid" @page_change="page_change" :valid="'valid'" :page_num="valid_current_page" :pages="valid" :total_pages="total_valid" :page_length="pageLength"></v-create-pagination>

        <div class="save-changes-container">
            <button @click="save_changes" class="save-changes" name="save-changes">Save Changes</button>
        </div>
    </div>
</div>