فیلدهای ورودی

<!-- Name -->
<div class="flex flex-col items-start gap-y-2">
    <label for="name" class="font-semibold text-xs">نام و نام خانوادگی:</label>
    <input type="text" name="name" id="name"
        class="block w-full h-9 bg-surface border ring-2 ring-offset-1 ring-transparent ring-offset-transparent rounded-lg inset-shadow-xs inset-shadow-surface-content/10 shadow-xs font-medium text-xs outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-1/75 focus-visible:ring-offset-surface focus-visible:ring-blue-500 placeholder:text-surface-2-content/70 px-3" />
</div>

<!-- Password -->
<div class="flex flex-col items-start gap-y-2">
    <label for="password" class="font-semibold text-xs">رمز
        عبور:</label>
    <div class="relative w-full" x-data="{ showPassword: false, value: '' }">
        <input x-bind:type="showPassword ? 'text' : 'password'" dir="ltr" name="password" id="password" x-model="value"
            class="block w-full h-9 bg-surface border ring-2 ring-offset-1 ring-transparent ring-offset-transparent rounded-lg inset-shadow-xs inset-shadow-surface-content/10 shadow-xs font-sans font-medium text-xs outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-1/75 focus-visible:ring-offset-surface focus-visible:ring-blue-500 placeholder:text-surface-2-content/70 px-3" />

        <button type="button"
            class="absolute inset-y-1 right-1 flex items-center justify-center w-7 bg-surface rounded-md cursor-pointer outline-hidden disabled:text-surface-2-content/50 disabled:cursor-not-allowed"
            x-bind:disabled="value.length === 0" x-on:click="showPassword = !showPassword">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="icon icon-tabler-external-link size-4" x-show="!showPassword">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6">
                </path>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="icon icon-tabler-external-link size-4" x-show="showPassword">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"></path>
                <path
                    d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87">
                </path>
                <path d="M3 3l18 18"></path>
            </svg>
        </button>
    </div>
</div>