tankstopp-app/internal/views/components/forms.templ

package components

import (
	"fmt"
	"tankstopp/internal/currency"
	"tankstopp/internal/models"
)

templ FormGroup(label, hint string) {
	<div class="mb-3">
		if label != "" {
			<label class="form-label">
				{ label }
			</label>
		}
		{ children... }
		if hint != "" {
			<div class="form-hint">{ hint }</div>
		}
	</div>
}

templ Input(name, inputType, placeholder, value string, required bool) {
	<input
		type={ inputType }
		class="form-control"
		name={ name }
		id={ name }
		placeholder={ placeholder }
		value={ value }
		if required {
			required
		}
	/>
}

templ NumberInput(name, placeholder string, value float64, step string, min float64, required bool) {
	<input
		type="number"
		class="form-control"
		name={ name }
		id={ name }
		placeholder={ placeholder }
		value={ fmt.Sprintf("%.2f", value) }
		step={ step }
		min={ fmt.Sprintf("%.2f", min) }
		if required {
			required
		}
	/>
}

templ DateInput(name, value string, required bool) {
	<input
		type="date"
		class="form-control"
		name={ name }
		id={ name }
		value={ value }
		if required {
			required
		}
	/>
}

templ TextArea(name, placeholder, value string, rows int) {
	<textarea
		class="form-control"
		name={ name }
		id={ name }
		rows={ fmt.Sprintf("%d", rows) }
		placeholder={ placeholder }
	>{ value }</textarea>
}

templ Select(name string, required bool) {
	<select
		class="form-select"
		name={ name }
		id={ name }
		if required {
			required
		}
	>
		{ children... }
	</select>
}

templ Option(value, text string, selected bool) {
	<option
		value={ value }
		if selected {
			selected
		}
	>{ text }</option>
}

templ CurrencySelect(name, selectedCurrency string, currencies []currency.Currency) {
	@Select(name, false) {
		@Option("", "Select currency...", selectedCurrency == "")
		for _, curr := range currencies {
			@Option(curr.Code, fmt.Sprintf("%s %s - %s", curr.Symbol, curr.Code, curr.Name), curr.Code == selectedCurrency)
		}
	}
}

templ VehicleSelect(name string, selectedVehicleID uint, vehicles []models.Vehicle, required bool) {
	@Select(name, required) {
		@Option("", "Select vehicle...", selectedVehicleID == 0)
		for _, vehicle := range vehicles {
			if vehicle.LicensePlate != "" {
				@Option(fmt.Sprintf("%d", vehicle.ID), fmt.Sprintf("%s (%s)", vehicle.Name, vehicle.LicensePlate), vehicle.ID == selectedVehicleID)
			} else {
				@Option(fmt.Sprintf("%d", vehicle.ID), vehicle.Name, vehicle.ID == selectedVehicleID)
			}
		}
	}
}

templ FuelTypeSelect(name, selectedFuelType string, required bool) {
	@Select(name, required) {
		@Option("", "Select fuel type...", selectedFuelType == "")
		@Option("Super E5", "Super E5", selectedFuelType == "Super E5")
		@Option("Super E10", "Super E10", selectedFuelType == "Super E10")
		@Option("Super Plus", "Super Plus", selectedFuelType == "Super Plus")
		@Option("Diesel", "Diesel", selectedFuelType == "Diesel")
		@Option("Premium Diesel", "Premium Diesel", selectedFuelType == "Premium Diesel")
		@Option("LPG", "LPG", selectedFuelType == "LPG")
		@Option("CNG", "CNG", selectedFuelType == "CNG")
		@Option("Electric", "Electric", selectedFuelType == "Electric")
		@Option("Hybrid", "Hybrid (Mixed)", selectedFuelType == "Hybrid")
	}
}

templ InputGroup(prefix, suffix string) {
	<div class="input-group">
		if prefix != "" {
			<span class="input-group-text" id={ prefix + "-addon" }>{ prefix }</span>
		}
		{ children... }
		if suffix != "" {
			<span class="input-group-text" id={ suffix + "-addon" }>{ suffix }</span>
		}
	</div>
}

templ PasswordInput(name, placeholder string, required bool) {
	<div class="input-group input-group-flat">
		<input
			type="password"
			class="form-control"
			name={ name }
			placeholder={ placeholder }
			autocomplete="off"
			if required {
				required
			}
		/>
		<span class="input-group-text">
			<a href="#" class="link-secondary" onclick="togglePassword(this)" title="Show password" data-target={ name }>
				@Icon("eye", 24)
			</a>
		</span>
	</div>
}

templ Switch(name, label string, checked bool) {
	<label class="form-check form-switch">
		<input
			class="form-check-input"
			type="checkbox"
			name={ name }
			if checked {
				checked
			}
		/>
		<span class="form-check-label">{ label }</span>
	</label>
}

templ FormButtons(cancelHref, submitText, submitIcon string) {
	<div class="card-footer bg-transparent mt-auto">
		<div class="btn-list justify-content-end">
			<a href={ templ.SafeURL(cancelHref) } class="btn">
				@Icon("arrow-left", 24)
				Cancel
			</a>
			<button type="submit" class="btn btn-primary ms-auto">
				if submitIcon != "" {
					@Icon(submitIcon, 24)
				}
				{ submitText }
			</button>
		</div>
	</div>
}

templ Form(method, action string) {
	<form method={ method } action={ action }>
		{ children... }
	</form>
}

templ FormRow() {
	<div class="row">
		{ children... }
	</div>
}

templ FormCol(size string) {
	<div class={ "col-md-" + size }>
		{ children... }
	</div>
}

templ DeleteButton(action, itemName string) {
	<form method="POST" action={ action } style="display: inline;" onsubmit="return confirmDelete(this)" data-item={ itemName }>
		<button type="submit" class="btn btn-sm btn-outline-danger">
			@Icon("trash", 24)
			Delete
		</button>
	</form>
}

templ EditButton(href string) {
	<a href={ templ.SafeURL(href) } class="btn btn-sm btn-outline-primary">
		@Icon("edit", 24)
		Edit
	</a>
}

templ ButtonGroup() {
	<div class="btn-list">
		{ children... }
	</div>
}

templ PrimaryButton(text string, icon string) {
	<button type="submit" class="btn btn-primary">
		if icon != "" {
			@Icon(icon, 24)
		}
		{ text }
	</button>
}

templ SecondaryButton(href, text string, icon string) {
	<a href={ templ.SafeURL(href) } class="btn">
		if icon != "" {
			@Icon(icon, 24)
		}
		{ text }
	</a>
}

templ InputWithIcon(name, inputType, placeholder, value string, icon string, required bool) {
	@FormGroup("", "") {
		if icon != "" {
			@Icon(icon, 24)
		}
		@Input(name, inputType, placeholder, value, required)
	}
}

templ CurrencyInputGroup(name string, value float64, currencySymbol string, step string) {
	@InputGroup(currencySymbol, "") {
		<input
			type="number"
			class="form-control"
			name={ name }
			id={ name }
			step={ step }
			min="0"
			value={ fmt.Sprintf("%.2f", value) }
			placeholder="0.00"
			required
		/>
	}
}

templ RefreshButton() {
	<button class="btn btn-outline-secondary" type="button">
		@Icon("refresh", 24)
	</button>
}