<template>
    <div class="mb-3">
        <label for="opsgenie-region" class="form-label">{{ $t("Region") }}<span style="color: red;"><sup>*</sup></span></label>
        <select id="opsgenie-region" v-model="$parent.notification.opsgenieRegion" class="form-select" required>
            <option value="us">
                US (Default)
            </option>
            <option value="eu">
                EU
            </option>
        </select>
    </div>
    <div class="mb-3">
        <label for="opsgenie-apikey" class="form-label">{{ $t("API Key") }}<span style="color: red;"><sup>*</sup></span></label>
        <HiddenInput id="opsgenie-apikey" v-model="$parent.notification.opsgenieApiKey" required="true" autocomplete="false"></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="opsgenie-priority" class="form-label">{{ $t("Priority") }}</label>
        <input id="opsgenie-priority" v-model="$parent.notification.opsgeniePriority" type="number" class="form-control" min="1" max="5" step="1">
    </div>
    <div class="form-text">
        <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
        <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
            <a href="https://docs.opsgenie.com/docs/alert-api" target="_blank">https://docs.opsgenie.com/docs/alert-api</a>
        </i18n-t>
    </div>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";
export default {
    components: {
        HiddenInput,
    },
};
</script>