@extends('Layout.base')
@section('title', 'Roles')
@section('titleLink', '/roles')
@section('content')
<div class="panel-header-xs">

</div>
<div class="content mt-0">
    <div class="row">
        <x-alert />
      </div>
  <div class="md:grid md:grid-cols-3 md:gap-6">
    <div class="md:col-span-1">

      <div class="px-4 sm:px-0">
        <div class="row">
          <h3 class="text-lg font-medium text-gray-900">Create Role</h3>

          <p class="mt-1 text-sm text-gray-600">
            Create a role with a perfect description.
          </p>
        </div>

      </div>

    </div>


    <div class="mt-5 md:mt-0 md:col-span-2">
      <form method="post" action="/roles/create">
        @csrf
        <div class="shadow overflow-hidden sm:rounded-md">
          <div class="px-4 py-5 bg-white sm:p-6">
            <div class="grid grid-cols-6 gap-6">

              <!-- Name -->
              <div class="col-span-6 sm:col-span-4">
                <label class="block font-medium text-sm text-gray-700" for="role">
                  Role *
                </label>

                <input class="form-input rounded-md shadow-sm mt-1 block w-full" name="role" value="{{ old('role') }}" type="text" >
                <x-jet-input-error for="role" class="mt-2" />

              </div>

              <!-- Email -->
              <div class="col-span-6 sm:col-span-4">
                <label class="block font-medium text-sm text-gray-700" for="description">
                  Description *
                </label>

                <textarea class="form-input rounded-md shadow-sm mt-1 block w-full" rows="3" name="description"  >{{ old('description') }}</textarea>
                <x-jet-input-error for="description" class="mt-2" />

              </div>
            </div>
          </div>

          <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6">
            <button type="submit" class="inline-flex items-center px-4 py-2 bg-primary-yy border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-secondary-yy  active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150">
              Save
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="row d-flex justify-content-center m-5">
    <a href="/roles" ><span class="card rounded-circle d-flex justify-content-center" style="width: 50px;height: 50px;"><i class="fas fa-chevron-left mx-auto"></i></span></a>
</div>
</div>
@endsection