Add state

.gitignore

@@ -1,3 +1,4 @@
+local.db
 # Created by https://www.toptal.com/developers/gitignore/api/go
 # Edit at https://www.toptal.com/developers/gitignore?templates=go
 

go.mod

@@ -4,11 +4,35 @@ go 1.22.2
 
 require github.com/a-h/templ v0.2.707
 
-require github.com/mergestat/timediff v0.0.3 // indirect
+require (
+	github.com/dustin/go-humanize v1.0.1 // indirect
+	github.com/google/uuid v1.6.0 // indirect
+	github.com/hashicorp/golang-lru/v2 v2.0.7 // indirect
+	github.com/jinzhu/inflection v1.0.0 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/mattn/go-sqlite3 v1.14.22 // indirect
+	github.com/mergestat/timediff v0.0.3 // indirect
+	github.com/ncruces/go-strftime v0.1.9 // indirect
+	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	github.com/tmthrgd/go-hex v0.0.0-20190904060850-447a3041c3bc // indirect
+	github.com/vmihailenco/msgpack/v5 v5.4.1 // indirect
+	github.com/vmihailenco/tagparser/v2 v2.0.0 // indirect
+	golang.org/x/sys v0.19.0 // indirect
+	modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b // indirect
+	modernc.org/libc v1.49.0 // indirect
+	modernc.org/mathutil v1.6.0 // indirect
+	modernc.org/memory v1.7.2 // indirect
+	modernc.org/sqlite v1.29.5 // indirect
+	modernc.org/strutil v1.2.0 // indirect
+	modernc.org/token v1.1.0 // indirect
+)
 
 require (
 	github.com/go-chi/chi v1.5.5
 	github.com/go-chi/chi/v5 v5.0.12 // indirect
 	github.com/gorcon/rcon v1.3.5 // indirect
 	github.com/joho/godotenv v1.5.1 // indirect
+	github.com/uptrace/bun v1.2.1
+	github.com/uptrace/bun/dialect/sqlitedialect v1.2.1
+	github.com/uptrace/bun/driver/sqliteshim v1.2.1
 )

go.sum

@@ -1,12 +1,57 @@
 github.com/a-h/templ v0.2.707 h1:T1Gkd2ugbRglZ9rYw/VBchWOSZVKmetDbBkm4YubM7U=
 github.com/a-h/templ v0.2.707/go.mod h1:5cqsugkq9IerRNucNsI4DEamdHPsoGMQy99DzydLhM8=
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
 github.com/go-chi/chi v1.5.5 h1:vOB/HbEMt9QqBqErz07QehcOKHaWFtuj87tTDVz2qXE=
 github.com/go-chi/chi v1.5.5/go.mod h1:C9JqLr3tIYjDOZpzn+BCuxY8z8vmca43EeMgyZt7irw=
 github.com/go-chi/chi/v5 v5.0.12 h1:9euLV5sTrTNTRUU9POmDUvfxyj6LAABLUcEWO+JJb4s=
 github.com/go-chi/chi/v5 v5.0.12/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/gorcon/rcon v1.3.5 h1:YE/Vrw6R99uEP08wp0EjdPAP3Jwz/ys3J8qxI1nYoeU=
 github.com/gorcon/rcon v1.3.5/go.mod h1:zR1qfKZttF8vAgH1NsP6CdpachOvLDq8jE64NboTpIM=
+github.com/hashicorp/golang-lru/v2 v2.0.7 h1:a+bsQ5rvGLjzHuww6tVxozPZFVghXaHOwFs4luLUK2k=
+github.com/hashicorp/golang-lru/v2 v2.0.7/go.mod h1:QeFd9opnmA6QUJc5vARoKUSoFhyfM2/ZepoAG6RGpeM=
+github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
+github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
 github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
 github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
+github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
 github.com/mergestat/timediff v0.0.3 h1:ucCNh4/ZrTPjFZ081PccNbhx9spymCJkFxSzgVuPU+Y=
 github.com/mergestat/timediff v0.0.3/go.mod h1:yvMUaRu2oetc+9IbPLYBJviz6sA7xz8OXMDfhBl7YSI=
+github.com/ncruces/go-strftime v0.1.9 h1:bY0MQC28UADQmHmaF5dgpLmImcShSi2kHU9XLdhx/f4=
+github.com/ncruces/go-strftime v0.1.9/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/tmthrgd/go-hex v0.0.0-20190904060850-447a3041c3bc h1:9lRDQMhESg+zvGYmW5DyG0UqvY96Bu5QYsTLvCHdrgo=
+github.com/tmthrgd/go-hex v0.0.0-20190904060850-447a3041c3bc/go.mod h1:bciPuU6GHm1iF1pBvUfxfsH0Wmnc2VbpgvbI9ZWuIRs=
+github.com/uptrace/bun v1.2.1 h1:2ENAcfeCfaY5+2e7z5pXrzFKy3vS8VXvkCag6N2Yzfk=
+github.com/uptrace/bun v1.2.1/go.mod h1:cNg+pWBUMmJ8rHnETgf65CEvn3aIKErrwOD6IA8e+Ec=
+github.com/uptrace/bun/dialect/sqlitedialect v1.2.1 h1:IprvkIKUjEjvt4VKpcmLpbMIucjrsmUPJOSlg19+a0Q=
+github.com/uptrace/bun/dialect/sqlitedialect v1.2.1/go.mod h1:mMQf4NUpgY8bnOanxGmxNiHCdALOggS4cZ3v63a9D/o=
+github.com/uptrace/bun/driver/sqliteshim v1.2.1 h1:xBsGsoMIskK7+dhtWIQ4CrO+UTWzC96G3vGzNDkr5aQ=
+github.com/uptrace/bun/driver/sqliteshim v1.2.1/go.mod h1:oJtOPSCDdDHgNw/0jwIGr+V0yUFxQ8NrBwJ3xbp4XOU=
+github.com/vmihailenco/msgpack/v5 v5.4.1 h1:cQriyiUvjTwOHg8QZaPihLWeRAAVoCpE00IUPn0Bjt8=
+github.com/vmihailenco/msgpack/v5 v5.4.1/go.mod h1:GaZTsDaehaPpQVyxrf5mtQlH+pc21PIudVV/E3rRQok=
+github.com/vmihailenco/tagparser/v2 v2.0.0 h1:y09buUbR+b5aycVFQs/g70pqKVZNBmxwAhO7/IwNM9g=
+github.com/vmihailenco/tagparser/v2 v2.0.0/go.mod h1:Wri+At7QHww0WTrCBeu4J6bNtoV6mEfg5OIWRZA9qds=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.19.0 h1:q5f1RH2jigJ1MoAWp2KTp3gm5zAGFUTarQZ5U386+4o=
+golang.org/x/sys v0.19.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b h1:BnN1t+pb1cy61zbvSUV7SeI0PwosMhlAEi/vBY4qxp8=
+modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b/go.mod h1:Qz0X07sNOR1jWYCrJMEnbW/X55x206Q7Vt4mz6/wHp4=
+modernc.org/libc v1.49.0 h1:/kkNBuCXvlTbOGwrQdgR67eK1Y9+kR+fhdBd89C64VM=
+modernc.org/libc v1.49.0/go.mod h1:DNz0lgQgT6FPIPm8rHtjFj0FL5/YOr/NYFXWYBcSxMw=
+modernc.org/mathutil v1.6.0 h1:fRe9+AmYlaej+64JsEEhoWuAYBkOtQiMEU7n/XgfYi4=
+modernc.org/mathutil v1.6.0/go.mod h1:Ui5Q9q1TR2gFm0AQRqQUaBWFLAhQpCwNcuhBOSedWPo=
+modernc.org/memory v1.7.2 h1:Klh90S215mmH8c9gO98QxQFsY+W451E8AnzjoE2ee1E=
+modernc.org/memory v1.7.2/go.mod h1:NO4NVCQy0N7ln+T9ngWqOQfi7ley4vpwvARR+Hjw95E=
+modernc.org/sqlite v1.29.5 h1:8l/SQKAjDtZFo9lkJLdk8g9JEOeYRG4/ghStDCCTiTE=
+modernc.org/sqlite v1.29.5/go.mod h1:S02dvcmm7TnTRvGhv8IGYyLnIt7AS2KPaB1F/71p75U=
+modernc.org/strutil v1.2.0 h1:agBi9dp1I+eOnxXeiZawM8F4LawKv4NzGWSaLfyeNZA=
+modernc.org/strutil v1.2.0/go.mod h1:/mdcBmfOibveCTBxUl5B5l6W+TTH1FXPLHZE6bTosX0=
+modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
+modernc.org/token v1.1.0/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=

main.go

@@ -6,10 +6,10 @@ import (
 	"log/slog"
 	"net/http"
 	"os"
-	"time"
 
 	"gitea.henriburau.de/haw-lan/cod4watcher/models"
 	"gitea.henriburau.de/haw-lan/cod4watcher/routes"
+	"gitea.henriburau.de/haw-lan/cod4watcher/services"
 	"github.com/go-chi/chi"
 	"github.com/joho/godotenv"
 )
@@ -19,25 +19,21 @@ func main() {
 		log.Fatal(err)
 	}
 
-	cod4server, err := models.NewCOD4ServerStatus("80.57.28.137", "28960", 1*time.Second)
-	if err != nil {
-		log.Panic(err)
-	}
-
-	status, err := cod4server.GetServerStatus()
-	if err != nil {
-		log.Panic(err)
-	}
-
-	log.Printf("%+v", status)
-
 	router := chi.NewMux()
 
-	server := &routes.Server{}
+	persistence, err := models.NewSQLitePersistence("local.db")
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	cs := services.NewCaptureService(persistence)
+	server := routes.NewServer(cs)
 
 	router.Handle("/*", public())
 	router.Get("/health", routes.Make(server.HandleHealth))
 	router.Get("/captures/{captureID}", routes.Make(server.HandleCapture))
+	router.Get("/new/capture", routes.Make(server.HandleCaptureForm))
+	router.Post("/new/capture", routes.Make(server.HandleCaptureCreate))
 	router.Get("/", routes.Make(server.HandleHome))
 
 	listenAddr := os.Getenv("LISTEN_ADDR")

models/capture.go

@@ -11,27 +11,29 @@ import (
 type MapScoreList []MapScore
 
 type Capture struct {
-	Id        uint
+	ID        int64 `bun:",pk,autoincrement"`
 	Host      string
 	Port      string
 	Name      string
 	Active    bool
 	Start     time.Time
-	MapScores MapScoreList
+	MapScores MapScoreList `bun:"rel:has-many,join:id=capture_id"`
 }
 
 type MapScore struct {
-	Id        uint
+	ID        int64 `bun:",pk,autoincrement"`
+	CaptureID int64 `bun:"capture_id"`
 	StartTime time.Time
 	Map       string
-	ScoreList []Score
+	ScoreList []Score `bun:"rel:has-many,join:id=mapscore_id"`
 }
 
 type Score struct {
-	Id    uint
+	ID         int64 `bun:",pk,autoincrement"`
-	Name  string
+	MapScoreID int64 `bun:"mapscore_id"`
-	Score int
+	Name       string
-	Ping  int
+	Score      int
+	Ping       int
 }
 
 type ResultTable struct {

models/cod4server.go

@@ -12,7 +12,7 @@ import (
 	"time"
 )
 
-var timeLayout = "Mon Jun  2 15:04:05 2006"
+var timeLayout = "Mon Jan  2 15:04:05 2006"
 
 type CoD4Server struct {
 	server   string
@@ -109,7 +109,7 @@ func parseServerData(data string) (*CoD4ServerStatus, error) {
 	c.serverData["_Maps"] = strings.Join(strings.Split(c.serverData["_Maps"], "-"), ",")
 	c.MapName = c.serverData["mapname"]
 
-	startTime, err := time.Parse(timeLayout, c.serverData["g_mapStartTime"])
+	startTime, err := time.ParseInLocation(timeLayout, c.serverData["g_mapStartTime"], time.Local)
 	if err != nil {
 		return nil, err
 	}

models/persistence.go

@@ -1,4 +1,58 @@
 package models
 
+import (
+	"context"
+	"database/sql"
+	"fmt"
+
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/dialect/sqlitedialect"
+	"github.com/uptrace/bun/driver/sqliteshim"
+)
+
 type Persistence interface {
+	CreateCapture(context.Context, *Capture) error
+	GetCaptures(context.Context) ([]Capture, error)
+}
+
+type SQLitePersistence struct {
+	db *bun.DB
+}
+
+func NewSQLitePersistence(dbloc string) (*SQLitePersistence, error) {
+	sqldb, err := sql.Open(sqliteshim.ShimName, fmt.Sprintf("file:%s", dbloc))
+	if err != nil {
+		return nil, err
+	}
+
+	db := bun.NewDB(sqldb, sqlitedialect.New())
+
+	ctx := context.Background()
+
+	for _, model := range []interface{}{(*Capture)(nil), (*MapScore)(nil), (*Score)(nil)} {
+		_, err := db.NewCreateTable().Model(model).IfNotExists().Exec(ctx)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	return &SQLitePersistence{
+		db,
+	}, nil
+}
+
+func (s *SQLitePersistence) GetCaptures(ctx context.Context) ([]Capture, error) {
+	var captures []Capture
+	err := s.db.NewSelect().Model(&captures).Scan(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	return captures, nil
+}
+
+func (s *SQLitePersistence) CreateCapture(ctx context.Context, capture *Capture) error {
+	_, err := s.db.NewInsert().Model(capture).Exec(ctx)
+
+	return err
 }

routes/capture.go

@@ -4,6 +4,7 @@ import (
 	"net/http"
 	"strconv"
 
+	"gitea.henriburau.de/haw-lan/cod4watcher/models"
 	"gitea.henriburau.de/haw-lan/cod4watcher/views/capture"
 	"github.com/go-chi/chi"
 )
@@ -22,3 +23,54 @@ func (s *Server) HandleCapture(w http.ResponseWriter, r *http.Request) error {
 
 	return Render(w, r, capture.Capture(foundCapture))
 }
+
+func (s *Server) HandleCaptureForm(w http.ResponseWriter, r *http.Request) error {
+	return Render(w, r, capture.CaptureForm(capture.CaptureFormValues{}, map[string]string{}))
+}
+
+func (s *Server) HandleCaptureCreate(w http.ResponseWriter, r *http.Request) error {
+	formValues, errors := parseCaptureFormAndValidate(r)
+	if len(errors) > 0 {
+		return Render(w, r, capture.CaptureForm(formValues, errors))
+	}
+
+	capture := &models.Capture{
+		Host:   formValues.Host,
+		Port:   formValues.Port,
+		Name:   formValues.Name,
+		Active: true,
+	}
+
+	err := s.cs.CreateCapture(r.Context(), capture)
+	if err != nil {
+		return err
+	}
+
+	return hxRedirect(w, r, "/")
+}
+
+func parseCaptureFormAndValidate(r *http.Request) (capture.CaptureFormValues, map[string]string) {
+	r.ParseForm()
+
+	formValues := capture.CaptureFormValues{
+		Host: r.FormValue("host"),
+		Port: r.FormValue("port"),
+		Name: r.FormValue("name"),
+	}
+
+	errors := map[string]string{}
+
+	if len(formValues.Host) <= 0 {
+		errors["host"] = "Host needs to be set"
+	}
+
+	if len(formValues.Port) <= 0 {
+		errors["port"] = "Port needs to be set"
+	}
+
+	if len(formValues.Name) < 5 || len(formValues.Name) > 50 {
+		errors["name"] = "Name needs to be between 5 and 50 characters long"
+	}
+
+	return formValues, errors
+}

routes/home.go

@@ -7,7 +7,7 @@ import (
 )
 
 func (s *Server) HandleHome(w http.ResponseWriter, r *http.Request) error {
-	captureList, err := s.cs.GetActiveCapures()
+	captureList, err := s.cs.GetActiveCapures(r.Context())
 	if err != nil {
 		return err
 	}

routes/routes.go

@@ -22,6 +22,23 @@ type Server struct {
 	cs *services.CaptureService
 }
 
+func NewServer(cs *services.CaptureService) *Server {
+	return &Server{
+		cs,
+	}
+}
+
 func Render(w http.ResponseWriter, r *http.Request, c templ.Component) error {
 	return c.Render(r.Context(), w)
 }
+
+func hxRedirect(w http.ResponseWriter, r *http.Request, url string) error {
+	if len(r.Header.Get("HX-Request")) > 0 {
+		w.Header().Set("hx-redirect", url)
+		w.WriteHeader(http.StatusSeeOther)
+		return nil
+	}
+
+	http.Redirect(w, r, url, http.StatusSeeOther)
+	return nil
+}

services/capture.go

@@ -1,26 +1,49 @@
 package services
 
 import (
+	"context"
 	"time"
 
 	"gitea.henriburau.de/haw-lan/cod4watcher/models"
 )
 
 type CaptureService struct {
+	p models.Persistence
 }
 
-var captures = []models.Capture{
+var mockCaptures = []models.Capture{
-	{Id: 1, Host: "80.57.28.137", Port: "28960", Active: true, Name: "Gungame HAW-LAN 11", Start: time.Now().Add(-1 * time.Hour)},
+	{ID: 1, Host: "80.57.28.137", Port: "28960", Active: true, Name: "Gungame HAW-LAN 11", Start: time.Now().Add(-1 * time.Hour)},
-	{Id: 1, Host: "80.57.28.137", Port: "28960", Active: true, Name: "Gungame HAW-LAN 12", Start: time.Now().Add(-5 * time.Minute)},
+	{ID: 1, Host: "80.57.28.137", Port: "28960", Active: true, Name: "Gungame HAW-LAN 12", Start: time.Now().Add(-5 * time.Minute)},
 }
 
-func (cs *CaptureService) GetActiveCapures() ([]models.Capture, error) {
+func NewCaptureService(persistence models.Persistence) *CaptureService {
+	return &CaptureService{
+		p: persistence,
+	}
+}
 
-	return captures, nil
+func (cs *CaptureService) CreateCapture(ctx context.Context, capture *models.Capture) error {
+	return cs.p.CreateCapture(ctx, capture)
+}
+
+func (cs *CaptureService) GetActiveCapures(ctx context.Context) ([]models.Capture, error) {
+	captures, err := cs.p.GetCaptures(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	var result []models.Capture
+	for _, capture := range captures {
+		if capture.Active {
+			result = append(result, capture)
+		}
+	}
+
+	return result, nil
 }
 
 func (cs *CaptureService) GetCaptureById(id int) (*models.Capture, error) {
-	capture := captures[0]
+	capture := mockCaptures[0]
 	server, err := models.NewCOD4ServerStatus(capture.Host, capture.Port, time.Second)
 	if err != nil {
 		return nil, err
@@ -33,7 +56,7 @@ func (cs *CaptureService) GetCaptureById(id int) (*models.Capture, error) {
 
 	capture.MapScores = []models.MapScore{
 		{
-			Id:        0,
+			ID:        0,
 			StartTime: status.MapStartTime,
 			Map:       status.MapName,
 			ScoreList: status.Score,

tmp/build-errors.log

@@ -1 +0,0 @@
-exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1exit status 1

views/capture/capture_form.templ

@@ -0,0 +1,50 @@
+package capture
+
+import "gitea.henriburau.de/haw-lan/cod4watcher/views/layouts"
+import "gitea.henriburau.de/haw-lan/cod4watcher/views/components"
+
+type CaptureFormValues struct {
+	Host string
+	Port string
+	Name string
+}
+
+templ CaptureForm(formValues CaptureFormValues, errors map[string]string) {
+	@layouts.Base() {
+		<div class="w-full mx-auto max-w-96 p-4 bg-white border border-gray-200 rounded-lg shadow  dark:bg-gray-800 dark:border-gray-700">
+			<form class="space-y-6" action="/new/capture" method="post">
+				<h5 class="text-xl font-medium text-gray-900 dark:text-white">Create new capture</h5>
+				<div>
+					<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
+					@components.Input(components.InputProps{
+						Name:        "name",
+						Value:       formValues.Name,
+						Error:       errors["name"],
+						Placeholder: "Name for the capture",
+					})
+				</div>
+				<div>
+					<label for="host" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Host</label>
+					@components.Input(components.InputProps{
+						Name:        "host",
+						Value:       formValues.Host,
+						Error:       errors["host"],
+						Placeholder: "Host-Address of the capture",
+					})
+				</div>
+				<div>
+					<label for="port" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Port</label>
+					@components.Input(components.InputProps{
+						Name:        "port",
+						Value:       formValues.Port,
+						Error:       errors["port"],
+						Placeholder: "Port for the capture",
+					})
+				</div>
+				<button type="submit" method="post" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+					Create capture
+				</button>
+			</form>
+		</div>
+	}
+}

views/capture/capture_form_templ.go

@@ -0,0 +1,98 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package capture
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "gitea.henriburau.de/haw-lan/cod4watcher/views/layouts"
+import "gitea.henriburau.de/haw-lan/cod4watcher/views/components"
+
+type CaptureFormValues struct {
+	Host string
+	Port string
+	Name string
+}
+
+func CaptureForm(formValues CaptureFormValues, errors map[string]string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var2 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"w-full mx-auto max-w-96 p-4 bg-white border border-gray-200 rounded-lg shadow  dark:bg-gray-800 dark:border-gray-700\"><form class=\"space-y-6\" action=\"/new/capture\" method=\"post\"><h5 class=\"text-xl font-medium text-gray-900 dark:text-white\">Create new capture</h5><div><label for=\"name\" class=\"block mb-2 text-sm font-medium text-gray-900 dark:text-white\">Name</label>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = components.Input(components.InputProps{
+				Name:        "name",
+				Value:       formValues.Name,
+				Error:       errors["name"],
+				Placeholder: "Name for the capture",
+			}).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div><label for=\"host\" class=\"block mb-2 text-sm font-medium text-gray-900 dark:text-white\">Host</label>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = components.Input(components.InputProps{
+				Name:        "host",
+				Value:       formValues.Host,
+				Error:       errors["host"],
+				Placeholder: "Host-Address of the capture",
+			}).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div><label for=\"port\" class=\"block mb-2 text-sm font-medium text-gray-900 dark:text-white\">Port</label>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = components.Input(components.InputProps{
+				Name:        "port",
+				Value:       formValues.Port,
+				Error:       errors["port"],
+				Placeholder: "Port for the capture",
+			}).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><button type=\"submit\" method=\"post\" class=\"w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800\">Create capture</button></form></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layouts.Base().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/capture/capture_templ.go

@@ -33,7 +33,7 @@ func Capture(capture *models.Capture) templ.Component {
 				templ_7745c5c3_Buffer = templ.GetBuffer()
 				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 			}
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col\"><div class=\"block font-bold text-lg\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -46,7 +46,7 @@ func Capture(capture *models.Capture) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"block\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -59,7 +59,7 @@ func Capture(capture *models.Capture) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(":")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -72,7 +72,7 @@ func Capture(capture *models.Capture) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 4)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -80,7 +80,7 @@ func Capture(capture *models.Capture) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 5)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}

views/capture/capture_templ.txt

@@ -1,5 +0,0 @@
-<div class=\"flex flex-col\"><div class=\"block font-bold text-lg\">
-</div><div class=\"block\">
-:
-</div>
-</div>

views/components/capture_card.templ

@@ -5,8 +5,9 @@ import "github.com/mergestat/timediff"
 import "fmt"
 
 templ CaptureCard(capture models.Capture) {
-	<a href={ templ.URL(fmt.Sprintf("/captures/%d", capture.Id)) } class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+	<a href={ templ.URL(fmt.Sprintf("/captures/%d", capture.ID)) } class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
 		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{ capture.Name }</h5>
 		<p class="font-normal text-gray-700 dark:text-gray-400">{ timediff.TimeDiff(capture.Start) }</p>
+		<button type="button" class="py-1 px-2 bg-red-500 text-white rounded-xl">Delete</button>
 	</a>
 }

views/components/capture_card_templ.go

@@ -27,16 +27,16 @@ func CaptureCard(capture models.Capture) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a href=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var2 templ.SafeURL = templ.URL(fmt.Sprintf("/captures/%d", capture.Id))
+		var templ_7745c5c3_Var2 templ.SafeURL = templ.URL(fmt.Sprintf("/captures/%d", capture.ID))
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700\"><h5 class=\"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -49,7 +49,7 @@ func CaptureCard(capture models.Capture) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h5><p class=\"font-normal text-gray-700 dark:text-gray-400\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -62,7 +62,7 @@ func CaptureCard(capture models.Capture) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 4)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p><button type=\"button\" class=\"py-1 px-2 bg-red-500 text-white rounded-xl\">Delete</button></a>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

views/components/capture_card_templ.txt

@@ -1,4 +0,0 @@
-<a href=\"
-\" class=\"block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700\"><h5 class=\"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white\">
-</h5><p class=\"font-normal text-gray-700 dark:text-gray-400\">
-</p></a>

views/components/capture_table_templ.go

@@ -26,12 +26,12 @@ func CaptureTable(table models.ResultTable) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"relative overflow-x-auto\"><table class=\"w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400\"><thead class=\"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400\"><tr>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, header := range table.Header {
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<th scope=\"col\" class=\"px-6 py-3\"><div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -44,7 +44,7 @@ func CaptureTable(table models.ResultTable) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"lowercase font-light\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -57,17 +57,17 @@ func CaptureTable(table models.ResultTable) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 4)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></th>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 5)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tr></thead> <tbody>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, row := range table.Rows {
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 6)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr class=\"bg-white border-b dark:bg-gray-800 dark:border-gray-700\"><th scope=\"row\" class=\"px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -80,7 +80,7 @@ func CaptureTable(table models.ResultTable) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 7)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th><td class=\"px-6 py-4\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -93,12 +93,12 @@ func CaptureTable(table models.ResultTable) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 8)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for _, score := range row.Individual {
-				templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 9)
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<td class=\"px-6 py-4\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -111,17 +111,17 @@ func CaptureTable(table models.ResultTable) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 10)
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 11)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tr>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 12)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tbody></table></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

views/components/capture_table_templ.txt

@@ -1,12 +0,0 @@
-<div class=\"relative overflow-x-auto\"><table class=\"w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400\"><thead class=\"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400\"><tr>
-<th scope=\"col\" class=\"px-6 py-3\"><div>
-</div><div class=\"lowercase font-light\">
-</div></th>
-</tr></thead> <tbody>
-<tr class=\"bg-white border-b dark:bg-gray-800 dark:border-gray-700\"><th scope=\"row\" class=\"px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white\">
-</th><td class=\"px-6 py-4\">
-</td>
-<td class=\"px-6 py-4\">
-</td>
-</tr>
-</tbody></table></div>

views/components/input.templ

@@ -0,0 +1,15 @@
+package components
+
+type InputProps struct {
+	Name        string
+	Value       string
+	Error       string
+	Placeholder string
+}
+
+templ Input(props InputProps) {
+	<input type="text" name={ props.Name } id={ props.Name } value={ props.Value } class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder={ props.Placeholder } required/>
+	if props.Error != "" {
+		<span class="text-red-500">{ props.Error }</span>
+	}
+}

views/components/input_templ.go

@@ -0,0 +1,113 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+type InputProps struct {
+	Name        string
+	Value       string
+	Error       string
+	Placeholder string
+}
+
+func Input(props InputProps) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"text\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/components/input.templ`, Line: 11, Col: 37}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/components/input.templ`, Line: 11, Col: 55}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/components/input.templ`, Line: 11, Col: 77}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white\" placeholder=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.Placeholder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/components/input.templ`, Line: 11, Col: 327}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" required> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if props.Error != "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<span class=\"text-red-500\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var6 string
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.Error)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/components/input.templ`, Line: 13, Col: 42}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/components/navbar_templ.go

@@ -23,7 +23,7 @@ func Nagivation() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<nav class=\"bg-gray-800\"><div class=\"mx-auto max-w-7xl\"><div class=\"relative flex h-16 items-center justify-between\"><div class=\"flex flex-1 items-center justify-center sm:items-stretch sm:justify-start\"><div class=\"flex flex-shrink-0 items-center\"><span class=\"text-white pr-2 font-bold\">Turnier-Tracker</span> <img class=\"h-8 w-auto\" src=\"/assets/logo.svg\" alt=\"Your Company\"></div><div class=\"hidden sm:ml-6 sm:block\"><div class=\"flex space-x-4\"><!-- Current: \"bg-gray-900 text-white\", Default: \"text-gray-300 hover:bg-gray-700 hover:text-white\" --><a href=\"/\" class=\"bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium\" aria-current=\"page\">Dashboard</a> <a href=\"/about\" class=\"text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium\">About</a></div></div></div><div class=\"absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0\"></div></div></div></nav>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

views/components/navbar_templ.txt

@@ -1 +0,0 @@
-<nav class=\"bg-gray-800\"><div class=\"mx-auto max-w-7xl\"><div class=\"relative flex h-16 items-center justify-between\"><div class=\"flex flex-1 items-center justify-center sm:items-stretch sm:justify-start\"><div class=\"flex flex-shrink-0 items-center\"><span class=\"text-white pr-2 font-bold\">Turnier-Tracker</span> <img class=\"h-8 w-auto\" src=\"/assets/logo.svg\" alt=\"Your Company\"></div><div class=\"hidden sm:ml-6 sm:block\"><div class=\"flex space-x-4\"><!-- Current: \"bg-gray-900 text-white\", Default: \"text-gray-300 hover:bg-gray-700 hover:text-white\" --><a href=\"/\" class=\"bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium\" aria-current=\"page\">Dashboard</a> <a href=\"/about\" class=\"text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium\">About</a></div></div></div><div class=\"absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0\"></div></div></div></nav>

views/layouts/base.templ

@@ -15,7 +15,7 @@ templ Base() {
 		</head>
 		<body class="antialiased">
 			@components.Nagivation()
-			<div class="mx-auto max-w-7xl mt-10 flex gap-3">
+			<div class="mx-auto max-w-7xl mt-10 flex gap-3 flex-wrap">
 				{ children... }
 			</div>
 			<script src="/assets/index.js"></script>

views/layouts/base_templ.go

@@ -25,7 +25,7 @@ func Base() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\"><head><title>CoD 4 Turnier-Tracker</title><link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/favicon.ico\"><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><link rel=\"stylesheet\" href=\"/assets/styles.css\"><script src=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js\"></script></head><body class=\"antialiased\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -33,7 +33,7 @@ func Base() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mx-auto max-w-7xl mt-10 flex gap-3 flex-wrap\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -41,7 +41,7 @@ func Base() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><script src=\"/assets/index.js\"></script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

views/layouts/base_templ.txt

@@ -1,3 +0,0 @@
-<!doctype html><html lang=\"en\"><head><title>CoD 4 Turnier-Tracker</title><link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/favicon.ico\"><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><link rel=\"stylesheet\" href=\"/assets/styles.css\"><script src=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js\"></script></head><body class=\"antialiased\">
-<div class=\"mx-auto max-w-7xl mt-10 flex gap-3\">
-</div><script src=\"/assets/index.js\"></script></body></html>