package user

import (
	"gobeyhan/database/models"
    "gobeyhan/views/components"
    "fmt"
)

type FormProps struct {
    User models.User
    Roles []models.Role
    Action string
    IsEdit bool
    Errors map[string]string
}

templ Form(props FormProps) {
	<form action={ templ.SafeURL(props.Action) } method="POST" class="space-y-6 bg-white p-6 rounded-lg shadow">
		@components.Input(components.InputProps{
			Label: "Username",
			Name: "username",
			Type: "text",
			Value: props.User.UserName,
            Error: props.Errors["username"],
		})

		@components.Input(components.InputProps{
			Label: "Email",
			Name: "email",
			Type: "email",
			Value: props.User.Email,
            Error: props.Errors["email"],
		})

        <div>
            <label for="role_id" class="block text-sm font-medium text-gray-700">Role</label>
            <select id="role_id" name="role_id" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md border">
                for _, role := range props.Roles {
                    <option value={ fmt.Sprintf("%d", role.ID) } selected?={ (len(props.User.Roles) > 0 && props.User.Roles[0].ID == role.ID) || (len(props.User.Roles) == 0 && role.Name == "user") }>{ role.Name }</option>
                }
            </select>
        </div>

        <div class="flex items-center">
            <input id="email_verified" name="email_verified" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked?={ props.User.IsEmailVerified() } />
            <label for="email_verified" class="ml-2 block text-sm text-gray-900">Email Verified</label>
        </div>

        if !props.IsEdit {
            @components.Input(components.InputProps{
                Label: "Password",
                Name: "password",
                Type: "password",
                Error: props.Errors["password"],
            })
        } else {
             <div class="mb-4">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password (Leave blank to keep current)</label>
                <input 
                    type="password" 
                    name="password" 
                    id="password" 
                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2 border"
                />
            </div>
        }

		<div class="flex justify-end gap-3">
			<a href="/admin/users" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Cancel</a>
			@components.Button(components.ButtonProps{
				Type: "submit",
				Label: "Save",
                Class: "w-auto",
			})
		</div>
	</form>
}