<template>
    <div v-if="authenticated && faulty_recorders_states.length > 0">
        <h2>Recorders with detected problems:</h2>
        <b-card-group deck>
            <b-card bg-variant="danger" text-variant="white" v-for="r_s in faulty_recorders_states" class="mb-2" style="max-width: 30rem; min-width:20rem;"
                    :header="r_s.name"
                    v-bind:key="r_s.id">
                <b-card-text>
                    <h5 class="card-title">
                        <strong>{{$t('Problem')}}:</strong>&nbsp;{{r_s.msg}}
                    </h5>
                    <b-button :to="{name: 'recorder', params: {recorder_id: r_s.id}}" variant="primary">Go to recorder
                    </b-button>
                </b-card-text>
                <div slot="footer">
                    <small>
                        <p>
                            <span v-if="r_s.time_stamp"><strong>{{$t('time stamp')}}:</strong>&nbsp;{{r_s.time_stamp}}</span>
                        </p>
                    </small>
                </div>
            </b-card>
        </b-card-group>
        <hr/>
    </div>
    <div v-else>
        <p>You must be signed in in order to see recorders!</p>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';
    import StateRepository from '@/api/stateRepository';
    import VirtualCommandRepository from "@/api/virtualCommandRepository";

    @Component
    export default class ErroneousRecorders extends Vue {

        get authenticated() {
            return this.$store.getters.isAuthenticated;
        }

        get faulty_recorders_states() {
            return this.$store.state.recorderStates.filter((s: any) => {
                return !s.state_ok
            });
        }

        private mounted() {
            this.$store.dispatch('loadRecorderStates');
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

</style>
