<x-form @submit.prevent="submit">
    <x-modal>
        <div class="form-group">
            <x-label for="name"  > {{__('Name') }}</x-label>
            <x-input type="text"  name="name"  v-model="fields.name" required />
            <x-error v-if="errors && errors.name">@{{ errors.name[0] }}</x-error>
        </div>
        <div class="form-group">
            <x-label for="code"  > {{__('Code') }}</x-label>
            <x-input type="text"  name="code"  v-model="fields.code" required />
            <x-error v-if="errors && errors.code">@{{ errors.code[0] }}</x-error>
        </div>
        <div class="form-group">
            <x-label for="country"  > {{__('Country') }}</x-label>
            <v-select name="country" :taggable="true"  :create-option="option => ({name: option, label: option})"   v-model="fields.country" @search="fetchCountry" :options="countries" :reduce="country => country.name" label="name"  />
            <x-error v-if="errors && errors.country">@{{ errors.country[0] }}</x-error>
        </div>
        <div class="form-group">
            <div class="custom-control custom-switch">
                <x-input name="status" type="checkbox" id="status" v-model="fields.status" class="custom-control-input" />
                <x-label for="status"  class="custom-control-label" > {{__('Status') }}</x-label>
            </div>
        </div>
        <x-slot name="footer">
            <a @click="save" class="btn btn-success float-left mx-1 float-right link-submit">{{ __('Save') }}</a>
            <button type="submit" class="btn btn-primary float-right link-submit">{{ __('save and continue') }}</button>
        </x-slot>
    </x-modal>
</x-form>