<template>
  <div class="d-flex flex-row">
    <div :class="spacerStyle"></div>
    <div class="mt-3 w-100">
      <div class="card flex-grow-1 schedulecard shadow-xs">
        <h6
          class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
        >
          <font-awesome-icon icon="clock" class="mr-2"></font-awesome-icon>
          <translate class="headline">Importschedule</translate>
        </h6>
        <div class="card-body schedulecardbody">
          <div class="card-body schedulecardbody">
            <div class="searchandfilter  w-50 d-flex flex-row">
              <div class="searchgroup input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="search">
                    <font-awesome-icon icon="search"></font-awesome-icon>
                  </span>
                </div>
                <input
                  v-model="searchQuery"
                  type="text"
                  class="form-control"
                  placeholder
                  aria-label="Search"
                  aria-describedby="search"
                />
              </div>
            </div>
            <table v-if="schedules.length" class="table">
              <thead>
                <tr>
                  <th><translate>Import</translate></th>
                  <th><translate>Type</translate></th>
                  <th><translate>Author</translate></th>
                  <th><translate>Schedule</translate></th>
                  <th><translate>Email</translate></th>
                  <th>&nbsp;</th>
                  <th>&nbsp;</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(schedule, index) in schedules" :key="index">
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>
                    <font-awesome-icon
                      icon="pencil-alt"
                      fixed-width
                    ></font-awesome-icon>
                  </td>
                  <td>
                    <font-awesome-icon
                      @click="deleteSchedule"
                      icon="trash"
                      fixed-width
                    ></font-awesome-icon>
                  </td>
                </tr>
              </tbody>
            </table>
            <div v-else class="mt-4 small text-center py-3">
              <translate>No schedules</translate>
            </div>
            <button
              @click="newImport"
              class="btn btn-info position-absolute newbutton"
            >
              <translate>New Import</translate>
            </button>
          </div>
        </div>
      </div>
    </div>
    <Importscheduledetail></Importscheduledetail>
  </div>
</template>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 */

import { mapState } from "vuex";
import Importscheduledetail from "./Importscheduledetail";
//import { SCHEDULES } from "../../store/imports.js";

export default {
  name: "importschedule",
  components: {
    Importscheduledetail
  },
  data() {
    return {
      searchQuery: ""
    };
  },
  methods: {
    newImport() {
      this.$store.commit("imports/setImportScheduleDetailVisible");
    },
    deleteSchedule(index) {
      this.$store.commit("imports/deleteSchedule", index);
    }
  },
  computed: {
    ...mapState("application", ["showSidebar"]),
    ...mapState("imports", ["schedules"]),
    spacerStyle() {
      return [
        "spacer ml-3",
        {
          "spacer-expanded": this.showSidebar,
          "spacer-collapsed": !this.showSidebar
        }
      ];
    }
  }
};
</script>

<style lang="scss" scoped>
.spacer {
  height: 100vh;
}

.spacer-collapsed {
  min-width: $icon-width + $offset;
  transition: $transition-fast;
}

.spacer-expanded {
  min-width: $sidebar-width + $offset;
}

.schedulecard {
  margin-right: $offset;
  min-height: 20rem;
}

.schedulecard-body {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.newbutton {
  position: absolute;
  bottom: $offset;
  right: $offset;
}
</style>