<div class="permission-create">
    <x-title>
        Create Permission
    </x-title>

    <div class="row">
        <div class="col-12 col-md-9">
            <div class="card">
                <div class="card-body">

                    <div class="mb-3">
                        <label class="form-label">Permission Name</label>
                        <input class="form-control"
                               wire:model.defer="name"
                               placeholder="e.g. users.view">
                        <div class="form-text">
                            Identifier (do not change later)
                        </div>
                        @error('name') <div class="text-danger small">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Group</label>
                        <input class="form-control"
                               wire:model.defer="group"
                               placeholder="Users">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Label</label>
                        <input class="form-control"
                               wire:model.defer="label"
                               placeholder="View users">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control"
                                  wire:model.defer="description"
                                  rows="3"></textarea>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button class="btn btn-success"
                                wire:click="save">
                            Create Permission
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- SIDEBAR --}}
        <div class="col-12 col-md-3">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Guidance</h4>
                    <hr>

                    <p class="text-muted small mb-0">
                        Permission names should follow a
                        <code>domain.action</code> convention.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
