{{template "base" .}}

{{define "title"}}Home - Webhooker{{end}}

{{define "content"}}
<div class="container mt-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="text-center mb-5">
                <h1 class="display-4">Welcome to Webhooker</h1>
                <p class="lead text-muted">A reliable webhook proxy service for event delivery</p>
            </div>
            
            <div class="row g-4">
                <!-- Server Status Card -->
                <div class="col-md-6">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="rounded-circle bg-success bg-opacity-10 p-3 me-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-server text-success" viewBox="0 0 16 16">
                                        <path d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4c0 1.473-2.985 2.667-6.667 2.667S1.333 5.473 1.333 4V2.667z"/>
                                        <path d="M1.333 6.334v3C1.333 10.805 4.318 12 8 12s6.667-1.194 6.667-2.667V6.334a6.51 6.51 0 0 1-1.458.79C11.81 7.684 9.967 8 8 8c-1.966 0-3.809-.317-5.208-.876a6.508 6.508 0 0 1-1.458-.79z"/>
                                        <path d="M14.667 11.668a6.51 6.51 0 0 1-1.458.789c-1.4.56-3.242.876-5.21.876-1.966 0-3.809-.316-5.208-.876a6.51 6.51 0 0 1-1.458-.79v1.666C1.333 14.806 4.318 16 8 16s6.667-1.194 6.667-2.667v-1.665z"/>
                                    </svg>
                                </div>
                                <div>
                                    <h5 class="card-title mb-1">Server Status</h5>
                                    <p class="text-success mb-0">Online</p>
                                </div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Uptime</small>
                                <p class="h4 mb-0">{{.Uptime}}</p>
                            </div>
                            <div>
                                <small class="text-muted">Version</small>
                                <p class="mb-0"><code>{{.Version}}</code></p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Users Card -->
                <div class="col-md-6">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="rounded-circle bg-primary bg-opacity-10 p-3 me-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-people text-primary" viewBox="0 0 16 16">
                                        <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
                                    </svg>
                                </div>
                                <div>
                                    <h5 class="card-title mb-1">Users</h5>
                                    <p class="text-muted mb-0">Registered accounts</p>
                                </div>
                            </div>
                            <div>
                                <p class="h2 mb-0">{{.UserCount}}</p>
                                <small class="text-muted">Total users</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            {{if not .User}}
            <div class="text-center mt-5">
                <p class="text-muted">Ready to get started?</p>
                <a href="/pages/login" class="btn btn-primary">Login to your account</a>
            </div>
            {{end}}
        </div>
    </div>
</div>
{{end}}