<template>
  <div class="d-flex flex-column pb-4 border-bottom">
    <h5 class="py-2 px-3 mb-2 m-0"><translate>Map Layers</translate></h5>
    <div class="px-3 container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <div class="form-group">
            <label for="ecdis-url" class="font-weight-bold">ECDIS URL</label>
            <input
              type="url"
              class="form-control"
              placeholder="https://..."
              v-model="config.ecdis_url"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="mt-4 px-3">
      <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
        <translate>Send</translate>
      </a>
    </div>
  </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):
 * Markus Kottländer <markus@intevation.de>
 */
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState("application", ["config"])
  },
  methods: {
    submit() {
      this.$store.commit("application/config", this.config);
    }
  }
};
</script>