package home

import (
	"github.com/zhang2092/go-url-shortener/internal/db"
	"github.com/zhang2092/go-url-shortener/internal/templ/base"
	"net/http"
)

templ css() {
	<link rel="stylesheet" href="/assets/css/home.css"/>
}

templ js() {
	<script href="/assets/js/home.js"></script>
}

templ Home(r *http.Request, data []*db.UserRelateUrl) {
	@base.Base(r, css(), js()) {
		<div class="container-fluid flex justify-content">
			<div class="main">
				<h3 style="margin-top: 20px;margin-bottom: 10px;">
					短地址列表
					<a
						class="btn btn-primary"
						href="/create-short-url"
					>添加</a>
				</h3>
				<table class="my_table" style="display: block;">
					<tr>
						<th width="600px">原地址</th>
						<th width="320px">短地址</th>
						<th width="80px">是否有效</th>
						<th width="80px">删除</th>
					</tr>
					for _, item := range data {
						<tr>
							<td width="600px">{ item.OriginUrl }</td>
							<td width="320px"><a target="_blank" href={ templ.URL(item.ShortUrl) }>{ item.ShortUrl }</a></td>
							<td width="80px">
								if item.Status == 0 {
									<code>YES</code>
								} else {
									<code>NO</code>
								}
							</td>
							<td width="80px">
								if item.Status == 0 {
									<button data-short-url={ item.ShortUrl } class="btn btn-danger deleteShortUrl">删除</button>
								}
							</td>
						</tr>
					}
				</table>
			</div>
		</div>
	}
}