<template>

    <div>
        <ul class="list-group">
            <li v-for="page in pages" class="list-group-item">
				<div class="row">
					<div class="col-lg-11 col-12 text-center">
		                <a class="btn text-left w-100" :href="page.url" target="_blank">
							<h6>{{ page.title }}</h6>
							{{ page.url }}
						</a>
					</div>
					<div class="btn-group col-lg-1 col-12">
						<button :disabled="busy" @click="reject(page)" class="btn btn-danger"><i class="fa fa-close"></i></button>
						<button :disabled="busy" @click="accept(page)" class="btn btn-success"><i class="fa fa-check"></i></button>
					</div>
				</div>
            </li>
        </ul>
    </div>

</template>

<script>
import { ref } from 'vue/dist/vue.esm-bundler';

export default {
	props: [
	],

	setup() {
		return {
			pages: ref([]),
			busy: ref(false),
		}
	},

	methods: {
		init() {
			this.update();
		},

		update() {
			this.busy = true;
			$.ajax({
				url: "/api/spider/pages",
				method: "GET"
			}).done(this.got_update);
		},

		got_update(data) {
			this.pages = data;
			this.busy = false;
		},

		accept(page) {
			if (this.busy) return;
			this.busy = true;
			$.ajax({
				url: "/api/spider/page/" + page.id,
				method: "PUT"
			}).done(this.got_update)
		},

		reject(page) {
			if (this.busy) return;
			this.busy = true;
			$.ajax({
				url: "/api/spider/page/" + page.id,
				method: "DELETE"
			}).done(this.got_update)
		},
	},

	mounted() {
		this.init();
	}
}
</script>
