module Web.View.WidgetPatterns.Edit where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude

data EditView = EditView
    { pattern     :: !WidgetPattern
    , hubs        :: ![Hub]
    , widgetTypes :: ![(Text, Text)]
    }

instance View EditView where
    html EditView { .. } = [hsx|
        <div class="mb-4">
            <a href={ShowWidgetPatternAction { widgetPatternId = pattern.id }}
               class="text-sm text-gray-500 hover:text-gray-700">
                ← Pattern
            </a>
        </div>
        <h1 class="text-2xl font-semibold mb-6">Edit Pattern</h1>

        <form method="POST" action={UpdateWidgetPatternAction { widgetPatternId = pattern.id }}>
            {csrfTokenFormField}
            <div class="space-y-4 max-w-lg">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                    <input type="text" name="name" value={pattern.name}
                        class="w-full border border-gray-300 rounded px-3 py-2 text-sm" />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Widget Type</label>
                    <p class="font-mono text-sm text-gray-600">{pattern.widgetType}</p>
                    <p class="text-xs text-gray-400">Widget type cannot be changed after creation.</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                    <textarea name="description" rows="3"
                        class="w-full border border-gray-300 rounded px-3 py-2 text-sm"
                        >{fromMaybe "" pattern.description}</textarea>
                </div>
                <button type="submit"
                    class="text-sm bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">
                    Save
                </button>
            </div>
        </form>
    |]