<template>
    <div class="col-md-12"><br>
        <label>{{ $t("problem.sample") }}</label>
        <button class="btn btn-primary btn-sm add-sample-btn" type="button" v-on:click="addSample">{{ $t("problem.addSample") }}
        </button>

        <div>
            <div class="panel panel-default" v-for="sample in sampleList">
                <div class="panel-heading">
                    <span class="panel-title">{{ $t("problem.sample") }} {{ $index + 1 }}</span>
                    <button type="button" class="btn btn-primary btn-sm" v-on:click="toggleSample($index)">
                        {{ sample.visible?$t("problem.fold"):$t("problem.show") }}
                    </button>
                    <button type="button" class="btn btn-danger btn-sm" v-on:click="delSample($index)">
                        {{ $t("adminUtils.delete") }}
                    </button>
                </div>
                <div class="panel-body row" v-show="sample.visible">
                    <div class="col-md-6">
                        <div class="form-group">
                            <p>{{ $t("problem.sample") }}{{ $t("adminUtils.input") }}</p>
                            <textarea class="form-control" rows="5" required></textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <p>{{ $t("problem.sample") }}{{ $t("adminUtils.output") }}</p>
                            <textarea class="form-control" rows="5" required></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default({
        props: {
            sampleList: {
                type: Array,
                required: true
            }
        },
        methods: {
            addSample() {
                this.sampleList.push({input: "", output: "", visible: true});
            },
            toggleSample(index) {
                this.sampleList[index].visible = !this.sampleList[index].visible;
            },
            delSample(index) {
                confirm(this.$t("problem.deleteThisSample"), ()=> {
                    this.sampleList.splice(index, 1);
                });
            }
        }
    })
</script>

<style scoped>
    .add-sample-btn {
        margin-bottom: 5px;
    }
    .panel-heading {
        padding-bottom: 8px;
    }
    .panel-body {
        padding-top: 5px;
    }
</style>