<template>
    <div>
        <b-form-group class="container">
            <section class="section">


                <h1 class="title">{{ $t('Manage_recorders') }}</h1>
                <p class="lead">
                    {{ $t('List_create_and_delete') }} <strong>{{ $t('recorders') }}</strong> {{$t('and')}} {{ $t('recorder_models')
                    }}
                </p>
                <br/>

                <b-tabs v-model="tabIndex" card justified>
                    <b-tab title="Recorder list" active>
                        <template slot="title">
                            <font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="circle"/>
                            <strong>{{$t('Recorders')}}</strong>&nbsp;{{$t('list')}}
                        </template>
                        <div class="mt-3">
                            <b-button-group>
                                <b-button variant="success" @click="filterShowAllRecorders()">{{$t('All recorders')}}</b-button>
                                <b-button variant="info" @click="filterOnlyShowOfflineRecorders()">{{$t('Offline recorders')}}</b-button>
                                <b-button variant="warning" @click="filterOnlyShowNonOfflineRecorders()">{{$t('Non offline recorders')}}</b-button>
                            </b-button-group>
                        </div>
                        <p>{{ $tc('recorders_defined', recorders.length, {num: recorders.length})}}:</p>
                        <b-card-group deck>
                            <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
                                    v-for="(recorder) in recorders"
                                    v-bind:key="recorder.id">
                                <template v-slot:header>
                                    <router-link :to="{name: 'recorder', params: {recorder_id: recorder.id}}">
                                        <h4>{{recorder.name}}</h4></router-link>
                                    <h6>{{' (' + recorder.ip + ' / ' + recorder.network_name + ')'}}</h6>
                                </template>
                                <b-card-text>
                                    <h5 class="card-title"><strong>{{ $t('name') }}:&nbsp;</strong>
                                        <span v-if="!formEditField[recorder.id+'_name']">{{recorder.name}}&nbsp;
                                        <a class="float-right badge badge-pill badge-primary">
                                            <font-awesome-icon
                                                    @click="initRecorderUpdate(recorder, 'name')"
                                                    icon="pencil-alt"/>
                                        </a>
                                    </span>
                                      <ValidationProvider :name="$t('name')" rules="required|min:3" v-slot="{ errors }" v-else slim>
                                        <b-input-group>
                                            <b-form-input :id="recorder.id+'_name'" name="name"
                                                          v-model="updateValues[recorder.id+'_name']"
                                                          v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                          class="form-control" type="text"
                                                          :placeholder="'Name ('+recorder.name +')'"
                                                          @blur="updateRecorder(recorder.id, 'name')"
                                                          @keyup.enter="updateRecorder(recorder.id, 'name')"
                                                          required></b-form-input>
                                            <b-input-group-append>
                                                <b-button :disabled="errors.length > 0"
                                                          @click="updateRecorder(recorder.id, 'name')"
                                                          variant="outline-success">
                                                    <font-awesome-icon icon="check"></font-awesome-icon>
                                                </b-button>
                                            </b-input-group-append>
                                        </b-input-group>
                                      </ValidationProvider>
                                    </h5>
                                    <hr/>
                                    <p class="card-text"><strong>{{ $t('Model') }}:</strong>&nbsp;
                                        {{recorder.model_name}}&nbsp;
                                    </p>
                                    <p class="card-text"><strong>{{ $t('firmware_version') }}:</strong>&nbsp;
                                        {{recorder.firmware_version}}&nbsp;
                                    </p>
                                    <p class="card-text"><strong>{{ $t('serial_number') }}:</strong>&nbsp;
                                        {{recorder.serial_number}}&nbsp;
                                    </p>
                                    <p class="card-text"><strong>{{ $t('network_name') }}:</strong>&nbsp;
                                        <span v-if="!formEditField[recorder.id+'_network_name']">{{recorder.network_name}}&nbsp;
                                        <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'network_name')">
                                            <font-awesome-icon
                                                    icon="pencil-alt"/>
                                        </a>
                                    </span>
                                      <ValidationProvider :name="$t('network_name')" rules="required|ip_or_fqdn" v-slot="{ errors }" v-else slim>
                                        <b-input-group size="sm">
                                            <b-form-input name="network_name"
                                                          style="min-width: 80%;"
                                                          v-model="updateValues[recorder.id+'_network_name']"
                                                          v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                          class="form-control" type="text"
                                                          :placeholder="'Network name ('+recorder.network_name +')'"
                                                          @keyup.enter="updateRecorder(recorder.id, 'network_name')"></b-form-input>
                                            <b-input-group-append>
                                                <b-button :disabled="errors.length > 0"
                                                          @click="updateRecorder(recorder.id, 'network_name')"
                                                          variant="outline-success">
                                                    <font-awesome-icon icon="check"></font-awesome-icon>
                                                </b-button>
                                            </b-input-group-append>
                                            <span>{{ errors[0] }}</span>
                                        </b-input-group>
                                      </ValidationProvider>
                                    </p>

                                    <p class="card-text"><strong>{{ $t('ip') }}:</strong>&nbsp;
                                        <span v-if="!formEditField[recorder.id+'_ip']">{{recorder.ip}}&nbsp;
                                        <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'ip')">
                                            <font-awesome-icon
                                                    icon="pencil-alt"/>
                                        </a>
                                    </span>
                                      <ValidationProvider :name="$t('ip')" rules="ip" v-slot="{ errors }" v-else slim>
                                        <b-input-group size="sm">
                                            <b-form-input name="ip"
                                                          v-model="updateValues[recorder.id+'_ip']"
                                                          v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                          class="form-control" type="text"
                                                          :placeholder="$t('ip address') +' ('+recorder.ip +')'"
                                                          @keyup.enter="updateRecorder(recorder.id, 'ip')"
                                                          required></b-form-input>
                                            <b-input-group-append>
                                                <b-button :disabled="errors.length > 0"
                                                          @click="updateRecorder(recorder.id, 'ip')"
                                                          variant="outline-success">
                                                    <font-awesome-icon icon="check"></font-awesome-icon>
                                                </b-button>
                                            </b-input-group-append>
                                          <span>{{ errors[0] }}</span>
                                        </b-input-group>
                                      </ValidationProvider>

                                    </p>

                                    <p class="card-text"><strong>{{ $t('ip v6') }}:</strong>&nbsp;
                                        <span v-if="!formEditField[recorder.id+'_ip6']">{{recorder.ip6}}&nbsp;
                                        <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'ip6')">
                                            <font-awesome-icon
                                                    icon="pencil-alt"/>
                                        </a>
                                    </span>
                                      <ValidationProvider :name="$t('ip6')" rules="ip6" v-slot="{ errors }" v-else slim>
                                        <b-input-group size="sm">
                                            <b-form-input name="ip6"
                                                          v-model="updateValues[recorder.id+'_ip6']"
                                                          v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                          class="form-control" type="text"
                                                          :placeholder="$t('ip v6 address') +' ('+recorder.ip6 +')'"
                                                          @keyup.enter="updateRecorder(recorder.id, 'ip6')"
                                                          required></b-form-input>
                                            <b-input-group-append>
                                                <b-button :disabled="errors.length > 0"
                                                          @click="updateRecorder(recorder.id, 'ip6')"
                                                          variant="outline-success">
                                                    <font-awesome-icon icon="check"></font-awesome-icon>
                                                </b-button>
                                            </b-input-group-append>
                                          <span>{{ errors[0] }}</span>
                                        </b-input-group>
                                      </ValidationProvider>

                                    </p>

                                    <p class="card-text"><strong>{{ $t('ssh_port') }}:</strong>&nbsp;
                                        <span v-if="!formEditField[recorder.id+'_ssh_port']">{{recorder.ssh_port}}&nbsp;
                                        <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'ssh_port')">
                                            <font-awesome-icon
                                                    icon="pencil-alt"/>
                                        </a>
                                    </span>
                                      <ValidationProvider :name="$t('ssh_port')" rules="required|between:0,65535" v-slot="{ errors }" v-else slim>
                                        <b-input-group size="sm">
                                            <b-form-input name="ssh_port"
                                                          v-model="updateValues[recorder.id+'_ssh_port']"
                                                          v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                          class="form-control" type="text"
                                                          :placeholder="'Room number ('+recorder.ssh_port +')'"
                                                          @blur="updateRecorder(recorder.id, 'ssh_port')"
                                                          @keyup.enter="updateRecorder(recorder.id, 'ssh_port')"
                                                          required></b-form-input>
                                            <b-input-group-append>
                                                <b-button :disabled="errors.length > 0"
                                                          @click="updateRecorder(recorder.id, 'ssh_port')"
                                                          variant="outline-success">
                                                    <font-awesome-icon icon="check"></font-awesome-icon>
                                                </b-button>
                                            </b-input-group-append>
                                          <span>{{ errors[0] }}</span>
                                        </b-input-group>

                                      </ValidationProvider>
                                    </p>

                                    <p class="card-text"><strong>{{ $t('telnet_port') }}:</strong>&nbsp;
                                        <span v-if="!formEditField[recorder.id+'_telnet_port']">{{recorder.telnet_port}}&nbsp;
                                        <a class="float-right badge badge-pill badge-info">
                                            <font-awesome-icon
                                                    @click="initRecorderUpdate(recorder, 'telnet_port')"
                                                    icon="pencil-alt"/>
                                        </a>
                                    </span>
                                      <ValidationProvider :name="$t('telnet_port')" rules="required|between:0,65535" v-slot="{ errors }" v-else slim>
                                        <b-input-group size="sm">
                                            <b-form-input name="telnet_port"
                                                          v-model="updateValues[recorder.id+'_telnet_port']"
                                                          v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                          class="form-control" type="text"
                                                          :placeholder="'Room number ('+recorder.telnet_port +')'"
                                                          @blur="updateRecorder(recorder.id, 'telnet_port')"
                                                          @keyup.enter="updateRecorder(recorder.id, 'telnet_port')"
                                                          required></b-form-input>
                                            <b-input-group-append>
                                                <b-button :disabled="errors.length > 0"
                                                          @click="updateRecorder(recorder.id, 'telnet_port')"
                                                          variant="outline-success">
                                                    <font-awesome-icon icon="check"></font-awesome-icon>
                                                </b-button>
                                            </b-input-group-append>
                                          <span>{{ errors[0] }}</span>
                                        </b-input-group>
                                      </ValidationProvider>
                                    </p>

                                    <hr/>
                                    <div v-if="recorder.room && !formEditField[recorder.id+'_room_id']">
                                        <p class="card-text"><strong>{{ $t('Room') }}:</strong>&nbsp;{{recorder.room.name}}&nbsp;
                                            <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'room_id')">
                                                <font-awesome-icon
                                                        icon="pencil-alt"/>
                                            </a></p>
                                    </div>
                                    <div v-else>
                                        <p class="card-text"><strong>{{ $t('Room') }}:</strong>&nbsp;
                                            <span v-if="recorder.room && recorder.room.name">{{recorder.room.name}}</span>
                                            <span v-else>{{$t('no_room_defined')}}</span>
                                        </p>
                                        <div class="form-group row">
                                            <div class="col-sm-8">
                                                <select class="form-control"
                                                        v-model="updateValues[recorder.id+'_room_id']"
                                                        @change="updateRecorder(recorder.id, 'room_id')">
                                                    <option value="">{{$t('No room selected')}}</option>
                                                    <option v-for="room in rooms" v-bind:value="room.id">
                                                        {{ room.name }}
                                                    </option>
                                                </select>
                                            </div>
                                            <label class="label col-sm-4 col-form-label">{{ $t('room') }}</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox"
                                                   v-model="show_assigned_rooms" id="assignedRoomsCheck">
                                            <label class="form-check-label" for="assignedRoomsCheck">
                                                Show already assigned rooms
                                            </label>
                                        </div>
                                    </div>

                                    <hr/>
                                    <b-form-group label-cols-sm="4"
                                                  label-cols-lg="3"
                                                  description="Set to offline / maintenance mode."
                                                  label-for="offline"
                                                  :label="$t('offline')">
                                        <b-form-checkbox :id="'offline' + recorder.id"
                                                         v-model="recorder.offline" name="check-button_offline" switch
                                                         @input="()=>{initRecorderUpdate(recorder, 'offline'); updateRecorder(recorder.id, 'offline')}">
                                            <b>({{$t('Offline')}}: {{ recorder.offline }})</b>
                                        </b-form-checkbox>
                                    </b-form-group>

                                    <b-form-group label-cols-sm="4"
                                                  label-cols-lg="3"
                                                  description="Lock recorder: No changes can be made."
                                                  label-for="locked"
                                                  :label="$t('locked')">
                                        <b-form-checkbox :id="'locked' + recorder.id"
                                                         v-model="recorder.locked" name="check-button_locked" switch
                                                         @input="()=>{initRecorderUpdate(recorder, 'locked'); updateRecorder(recorder.id, 'locked')}">
                                            <b>({{$t('Locked')}}: {{ recorder.locked }})</b>
                                        </b-form-checkbox>
                                    </b-form-group>

                                    <strong>{{ $t('lock_message') }}:</strong>&nbsp;
                                    <span v-if="!formEditField[recorder.id+'_lock_message']">{{recorder.lock_message}}&nbsp;
                                        <a class="float-right badge badge-pill badge-info">
                                            <font-awesome-icon
                                                    @click="initRecorderUpdate(recorder, 'lock_message')"
                                                    icon="pencil-alt"/>
                                        </a>
                                        </span>
                                    <textarea class="textarea form-control" v-else name="lock_message"
                                              v-model="updateValues[recorder.id+'_lock_message']"
                                              :placeholder="$t('lock_message') +' ('+recorder.lock_message +')'"
                                              @blur="updateRecorder(recorder.id, 'lock_message')"></textarea>

                                    <hr/>
                                    <div v-if="recorder.recorder_model">
                                        <p class="card-text"><strong>{{ $t('Model Adadpter') }}:</strong>&nbsp;{{recorder.recorder_model.name}}&nbsp;
                                            <a class="float-right badge badge-pill badge-info">
                                                <font-awesome-icon icon="pencil-alt"/>
                                            </a></p>
                                    </div>
                                    <div v-else>
                                        <p class="card-text"><strong>{{ $t('Model Adadpter') }}:</strong>&nbsp;{{
                                            $t('no_model_defined')}}</p>
                                        <div class="form-group row">
                                            <div class="col-sm-8">
                                                <select class="form-control" v-model="form.recorder_model">
                                                    <option value="">{{$t('No Model Adadpter selected')}}</option>
                                                    <option v-for="recorderModel in recorderModels"
                                                            v-bind:value="recorderModel.id">
                                                        {{ recorderModel.name }}
                                                    </option>
                                                </select>
                                            </div>
                                            <label class="label col-sm-4 col-form-label">{{ $t('model') }}</label>
                                        </div>
                                    </div>
                                    <hr/>

                                    <strong>{{ $t('description') }}:</strong>&nbsp;
                                    <span v-if="!formEditField[recorder.id+'_description']">{{recorder.description}}&nbsp;
                                        <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'description')">
                                            <font-awesome-icon
                                                    icon="pencil-alt"/>
                                        </a>
                                        </span>
                                    <textarea class="textarea form-control" v-else name="description"
                                              v-model="updateValues[recorder.id+'_description']"
                                              :placeholder="$t('description') +' ('+recorder.description +')'"
                                              @blur="updateRecorder(recorder.id, 'description')"></textarea>

                                    <hr/>

                                    <strong>{{ $t('virtual_commands') }}:</strong>&nbsp;

                                    <b-list-group v-if="recorder.virtual_commands.length"
                                                  style="max-height: 400px; overflow-y:scroll;">
                                        <b-list-group-item v-for="command in recorder.virtual_commands"
                                                           v-bind:key="command.id">
                                            {{command.name}}
                                        </b-list-group-item>

                                    </b-list-group>
                                    <span>
                                        {{$t('No virtual commands defined yet.')}}
                                    </span>

                                </b-card-text>
                                <div slot="footer">
                                    <small class="text-muted">
                                        <p>{{ $t('created')}}: {{recorder.created_at | moment("dddd, MMMM Do YYYY")}}<br/>
                                            {{ $t('last_time_modified')}}: {{recorder.last_time_modified | moment("dddd, MMMM Do YYYY")}}<br/>
                                            <span class="pull-right">
                                            <button type="button" v-on:click="deleteRecorder(recorder.id)"
                                                    class="btn btn-sm btn-danger">{{
                                        $t('delete') }}&nbsp;<font-awesome-icon
                                                        icon="trash"/>
                                            </button>
                                        </span>
                                        </p>
                                    </small>
                                </div>
                            </b-card>
                        </b-card-group>
                    </b-tab>
                    <b-tab title="Create recorder">
                        <template slot="title">
                            <font-awesome-icon icon="plus"/>
                            <i>{{ $t('create') }}</i>&nbsp;<font-awesome-icon icon="circle"/>
                            <strong>{{ $t('Recorder') }}</strong>
                        </template>
                        <b-card-text>
                            <p>{{ $t('Create_a_new_recorder')}}:</p>
                            <!-- form starts here -->
                          <ValidationObserver v-slot="{ invalid }">
                            <form v-on:submit.prevent="saveRecorder()">
                                <section class="form">

                                  <ValidationProvider :name="$t('name')" rules="required|min:3" v-slot="{ errors }" slim>
                                    <div class="form-group row">
                                        <label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
                                        <div class="col-sm-6">
                                            <input name="name"
                                                   v-model="form.name"
                                                   v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                   class="form-control" type="text" :placeholder="$t('Recorder_name')"
                                                   required>
                                        </div>
                                        <p class="col-sm-4" v-show="errors.length > 0">
                                          {{ errors[0] }}
                                        </p>
                                    </div>
                                  </ValidationProvider>


                                    <div class="form-group row">
                                        <label class="label col-sm-2 col-form-label">{{ $t('description') }}</label>
                                        <div class="col-sm-6">
                                        <textarea class="textarea form-control"
                                                  :placeholder="$t('Comments') +', ' + $t('notes') + ', etc.'"
                                                  v-model="form.description"></textarea>
                                        </div>
                                    </div>

                                  <ValidationProvider :name="$t('network_name')" rules="required|ip_or_fqdn" v-slot="{ errors }" slim>
                                    <div class="form-group row">
                                        <label class="label required col-sm-2 col-form-label">{{ $t('network_name') }}</label>
                                        <div class="col-sm-6">
                                            <input name="network_name"
                                                   v-model="form.network_name"
                                                   v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                   class="form-control" type="text" :placeholder="$t('network_name')"
                                                   required
                                            >
                                        </div>
                                        <p class="col-sm-4" v-show="errors.length > 0">
                                          {{ errors[0] }}
                                        </p>
                                    </div>
                                  </ValidationProvider>

                                  <ValidationProvider :name="$t('mac')" rules="mac" v-slot="{ errors }" slim>
                                    <div class="form-group row">
                                        <label class="label col-sm-2 col-form-label">{{ $t('mac') }}</label>
                                        <div class="col-sm-6">
                                            <input name="mac"
                                                   v-model="form.mac"
                                                   v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                   class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('mac')">
                                        </div>
                                        <p class="col-sm-4" v-show="errors.length > 0">
                                          {{ errors[0] }}
                                        </p>
                                    </div>
                                  </ValidationProvider>

                                  <ValidationProvider :name="$t('ip')" rules="ip" v-slot="{ errors }" slim>
                                    <div class="form-group row">
                                        <label class="label col-sm-2 col-form-label">{{ $t('ip') }}</label>
                                        <div class="col-sm-6">
                                            <input name="ip"
                                                   v-model="form.ip"
                                                   v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                   class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ip')">
                                        </div>
                                      <p class="col-sm-4" v-show="errors.length > 0">
                                        {{ errors[0] }}
                                      </p>
                                    </div>
                                  </ValidationProvider>

                                  <ValidationProvider :name="$t('ipv6')" rules="ip6" v-slot="{ errors }" slim>
                                    <div class="form-group row">
                                        <label class="label col-sm-2 col-form-label">{{ $t('ipv6') }}</label>
                                        <div class="col-sm-6">
                                            <input name="ip6"
                                                   v-model="form.ip6"
                                                   v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                   class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ipv6')">
                                        </div>
                                        <p class="col-sm-4" v-show="errors.length > 0">
                                            {{ errors[0] }}
                                        </p>
                                    </div>
                                  </ValidationProvider>

                                  <ValidationProvider :name="$t('telnet_port')" rules="required|between:0,65535" v-slot="{ errors }" slim>
                                    <div class="form-group row">
                                        <label class="label col-sm-2 col-form-label">{{ $t('telnet_port') }}</label>
                                        <div class="col-sm-6">
                                            <input name="telnet_port"
                                                   v-model="form.telnet_port"
                                                   v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                   class="form-control" type="number" value="22"
                                                   placeholder="Telnet Port (23)">
                                        </div>
                                        <p class="col-sm-4" v-show="errors.length > 0">
                                            {{ errors[0] }}
                                        </p>
                                    </div>
                                  </ValidationProvider>

                                  <ValidationProvider :name="$t('ssh_port')" rules="required|between:0,65535" v-slot="{ errors }" slim>
                                    <div class="form-group row">
                                        <label class="label col-sm-2 col-form-label">{{ $t('ssh_port') }}</label>
                                        <div class="col-sm-6">
                                            <input name="ssh_port"
                                                   v-model="form.ssh_port"
                                                   v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                   class="form-control" type="number" value="23"
                                                   placeholder="SSH Port (22)">
                                        </div>
                                        <p class="col-sm-4" v-show="errors.length > 0">
                                            {{ errors[0] }}
                                        </p>
                                    </div>
                                  </ValidationProvider>

                                    <div class="form-group row">
                                        <label class="label col-sm-2 col-form-label">{{ $t('Model') }}</label>
                                        <div class="col-sm-6">
                                            <select class="form-control" v-model="form.recorder_model_id">
                                                <option disabled value="">{{$t('No_recorder_model_selected')}}</option>
                                                <option v-for="recorderModel in recorderModels"
                                                        v-bind:value="recorderModel.id">
                                                    {{ recorderModel.name }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="label col-sm-2 col-form-label">{{ $t('room') }}</label>
                                        <div class="col-sm-6">
                                            <select class="form-control" v-model="form.room_id">
                                                <option disabled value="">Not assigned to room</option>
                                                <option v-for="room in rooms" v-bind:value="room.id">
                                                    {{ room.name }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                  <ValidationProvider :name="$t('username')" rules="" v-slot="{ errors }" slim>
                                    <div class="form-group row">
                                        <label class="label col-sm-2 col-form-label">{{ $t('username') }}</label>
                                        <div class="col-sm-6">
                                            <input name="username"
                                                   v-model="form.username"
                                                   v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                   class="form-control" type="text" :placeholder="$t('username')"
                                            >
                                        </div>
                                        <p class="col-sm-4">
                                            {{$t('may_be_left_blank')}} (-> {{$t('Model')}})
                                        </p>
                                    </div>
                                  </ValidationProvider>

                                  <ValidationProvider :name="$t('password')" rules="" v-slot="{ errors }" slim>
                                    <div class="form-group row">
                                        <label class="label col-sm-2 col-form-label">{{ $t('password') }}</label>
                                        <div class="col-sm-6">
                                            <input name="password"
                                                   v-model="form.password"
                                                   v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
                                                   class="form-control" type="text" :placeholder="$t('password')"
                                            >
                                        </div>
                                        <p class="col-sm-4">
                                            {{$t('may_be_left_blank')}} (-> {{$t('Model')}})
                                        </p>
                                    </div>
                                  </ValidationProvider>


                                    <div class="field is-grouped">
                                        <div class="control">
                                            <button
                                                    v-bind:disabled="invalid"
                                                    type="submit"
                                                    class="btn btn-primary">
                                                Create recorder
                                            </button>
                                        </div>
                                    </div>

                                </section>
                            </form>
                          </ValidationObserver>
                        </b-card-text>
                    </b-tab>
                    <b-tab title="Recorder model list">
                        <template slot="title">
                            <font-awesome-icon icon="list"/>&nbsp;{{$t('Recorder')}}&nbsp;<font-awesome-icon icon="scroll"/>
                            <strong>{{$t('Model')}}</strong>&nbsp;<i>{{$t('list')}}</i>
                        </template>
                        <p>{{ $tc('recorder_models_defined', recorderModels.length, {num: recorderModels.length} ) }}:</p>
                        <b-card-group deck>
                            <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
                                    v-for="(recorderModel) in recorderModels"
                                    :header="recorderModel.name"
                                    v-bind:key="recorderModel.id">
                                <b-card-text>
                                    <p class="card-text">
                                        <strong>{{ $t('notes') }}:</strong>&nbsp;
                                        <span v-if="!formRecModelEditField[recorderModel.id+'_notes']">{{recorderModel.notes}}&nbsp;
                                        <a class="float-right badge badge-pill badge-info" @click="initRecorderModelUpdate(recorderModel, 'notes')">
                                            <font-awesome-icon
                                                    icon="pencil-alt"/>
                                        </a>
                                        </span>
                                        <textarea class="textarea form-control" v-else name="notes"
                                                  v-model="updateRecModelValues[recorderModel.id+'_notes']"
                                                  :placeholder="'Notes ('+recorderModel.notes +')'"
                                                  @blur="updateRecorderModel(recorderModel.id, 'notes')"></textarea>

                                    </p>

                                    <p class="card-text">
                                        <strong>{{ $t('requires_username') }}:</strong>&nbsp;<span
                                            v-if="recorderModel.requires_username">{{$t('yes')}}</span><span v-else>{{$t('no')}}</span>
                                    </p>
                                    <p class="card-text">
                                        <strong>{{ $t('requires_password') }}:</strong>&nbsp;<span
                                            v-if="recorderModel.requires_password">{{$t('yes')}}</span><span v-else>{{$t('no')}}</span>
                                    </p>

                                    <hr/>

                                    <b-list-group style="max-height: 400px; overflow-y:scroll;">
                                        <strong>Recorder Model {{ $t('commands') }}:</strong>&nbsp;
                                        <b-list-group-item v-for="command in recorderModel.commands"
                                                           v-bind:key="command.id">
                                            {{command.name}}
                                            <b-badge v-for="(a_type, arg) in command.parameters"
                                                     v-bind:key="arg"
                                                     v-if="command.parameters !== null" style="margin-right: 10px;">
                                                <small>{{arg}}:&nbsp;{{a_type}}</small>
                                            </b-badge>

                                        </b-list-group-item>
                                    </b-list-group>

                                </b-card-text>
                                <div slot="footer">
                                    <small class="text-muted">
                                        <p>{{ $t('created')}}: {{recorderModel.created_at | moment("dddd, MMMM Do YYYY")}}</p>
                                    </small>
                                </div>
                            </b-card>
                        </b-card-group>
                    </b-tab>
                </b-tabs>
            </section>
        </b-form-group>
        <hr>

        <!--
        <div class="column">
            <section class="section" id="results">
                <div class="box">
                    <ul>

                        <li v-for="(item, k) in form">
                            <strong>{{ k }}:</strong> {{ item }}
                        </li>
                    </ul>
                </div>
            </section>
        </div>


        <div class="column">
            <section class="section">
                {{recorders}}
            </section>
        </div>
        -->

    </div>
</template>

<script>
    import {EventBus} from '@/utils';
    import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
    import getRepository from '@/api/RepositoryFactory';

    const recorderRepository = getRepository('recorder');

    export default {
        components: {
            PulseLoader,
        },
        props: [],
        data() {
            return {
                onlyShowOfflineRecorders: false,
                onlyShowNonOfflineRecorders: false,
                tabIndex: 0,
                updateValues: {},
                formEditField: {},
                updateRecModelValues: {},
                formRecModelEditField: {},
                show_assigned_recorders: false,
                show_assigned_rooms: true,
                form: {
                    name: '',
                    description: '',
                    network_name: '',
                    ip: '',
                    ip6: '',
                    telnet_port: 23,
                    ssh_port: 22,
                    locked: false,
                    offline: false,
                    username: '',
                    password: '',
                    recorder_model: null,
                    room: null,
                },
            };
        },
        methods: {
            initRecorderUpdate(recorder, fieldName) {
                this.$set(this.formEditField, recorder.id + '_' + fieldName, true);
                this.$set(this.updateValues, recorder.id + '_' + fieldName, recorder[fieldName]);
            },
            initRecorderModelUpdate(recorderModel, fieldName) {
              this.$set(this.formRecModelEditField, recorderModel.id + '_' + fieldName, true);
              this.$set(this.updateRecModelValues, recorderModel.id + '_' + fieldName, recorderModel[fieldName]);
            },
            updateRecorder(id, fieldName) {
                this.$parent.$data.isLoading = true;
                const data = {};
                data[fieldName] = this.updateValues[id + '_' + fieldName];
                recorderRepository.updateRecorder(id, data)
                    .then(() => {
                        this.$store.dispatch('loadRecorders')
                            .then(() => {
                                this.$parent.$data.isLoading = false;
                                this.formEditField[id + '_' + fieldName] = false;
                            });
                    });
            },
            updateRecorderModel(id, fieldName) {
              this.$parent.$data.isLoading = true;
              const data = {};
              data[fieldName] = this.updateRecModelValues[id + '_' + fieldName];
              recorderRepository.updateRecorderModel(id, data)
                  .then(() => {
                    this.$store.dispatch('loadRecorderModels')
                        .then(() => {
                          this.$parent.$data.isLoading = false;
                          this.formRecModelEditField[id + '_' + fieldName] = false;
                        });
                  });
            },
            saveRecorder() {
                this.$parent.$data.isLoading = true;
                recorderRepository.createRecorder(this.form)
                    .then((result) => {
                        console.info(result);
                        this.$store.dispatch('loadRecorders')
                            .then(() => {
                                this.$parent.$data.isLoading = false;
                                this.tabIndex = 0;
                            });
                    }).catch((error) => {
                        EventBus.$emit('errorMessage', 'Could not safe recorder: '+error.data.message+'!');
                });
            },
            deleteRecorder(id) {
                this.$parent.$data.isLoading = true;
                recorderRepository.deleteRecorder(id)
                    .then(() => {
                        this.$store.dispatch('loadRecorders')
                            .then(() => {
                                this.$parent.$data.isLoading = false;
                            });
                    });
            },
            //showErrorMessage(msg) {
            //   this.$parent.$data.isLoading = false;
            //    this.$parent.$data.showAlert = true;
            //    this.$parent.$data.alertMessage = msg;
            //},
            filterShowAllRecorders(){
                this.onlyShowOfflineRecorders = false;
                this.onlyShowNonOfflineRecorders = false;
            },
            filterOnlyShowOfflineRecorders(){
                this.onlyShowOfflineRecorders = true;
                this.onlyShowNonOfflineRecorders = false;
            },
            filterOnlyShowNonOfflineRecorders(){
                this.onlyShowOfflineRecorders = false;
                this.onlyShowNonOfflineRecorders = true;
            },
        },
        mounted() {
            this.$parent.$data.isLoading = true;
            this.$parent.$data.showAlert = false;
            this.$store.dispatch('loadRecorders')
                .then(() => {
                    this.$store.dispatch('loadRooms')
                        .then(() => {
                            this.$parent.$data.isLoading = false;
                        });
                });
            this.$store.dispatch('loadRecorderModels');
        },
        computed: {
            rooms() {
                return this.$store.state.rooms;
            },
            recorders() {
                if(this.onlyShowOfflineRecorders){
                    return this.$store.state.recorders.filter((item) => {
                        return item.offline;
                    });
                }
                else if(this.onlyShowNonOfflineRecorders){
                    return this.$store.state.recorders.filter((item) => {
                        return !item.offline;
                    });
                }
                return this.$store.state.recorders;
            },
            recorderModels() {
                return this.$store.state.recorderModels;
            },
            recorderCommands() {
                return this.$store.state.recorderCommands;
            },
        },
    };
</script>

<style>
    .comment {
        white-space: pre-wrap;
    }

    .card:hover {
        background-color: whitesmoke;
    }

    .required:after {
        content: " *";
    }

    b-form-input {
        min-width: 80%;
    }
</style>
