<template>
  <PopupTemplate heading="Add Secret" size="MEDIUM" ref="base">
    <div class="content-l">
        <h3>Type</h3>
        <UiInput>
            <select name="" id="">
                <option value="generic">Generic</option>
                <option value="tls">TLS</option>
                <option value="basic-auth">Basic Auth</option>
                <option value="docker-registry">Docker Registry</option>
            </select>
        </UiInput>
        <h3>Metadata</h3>
        <div class="tile-m col-2">
            <UiInput label="Name">
                <input type="text">
            </UiInput>
            <UiInput label="Namespace">
                <NamespacePicker></NamespacePicker>
            </UiInput>
        </div>
        <h3>Data</h3>
        <div class="col-2 tile-m">
            <UiInput label="Key">
                <input type="text">
            </UiInput>
            <UiInput label="Value">
                <input type="text">
            </UiInput>
        </div>
        <div class="center">
            <UiButton class="hollow width-6rem">Cancel</UiButton>
            <UiButton class="width-6rem">Create</UiButton>
        </div>
    </div>
  </PopupTemplate>
</template>

<script setup lang="ts">
import type PopupTemplate from '../popup/PopupTemplate.vue';
import NamespacePicker from '../NamespacePicker.vue';

const base = ref();

defineExpose({
  open: () => base.value.open()
});
</script>

<style scoped>

</style>