package xsample

import (
	"github.com/emarifer/go-templ-project-structure/views/layout"
	"github.com/emarifer/go-templ-project-structure/services"
	"github.com/emarifer/go-templ-project-structure/models"
	"github.com/emarifer/go-templ-project-structure/views/component/table"
)

templ Coba(title string) {
	<div>{ title }</div>
	@tablecomponent.Table([]string{"kode", "user group", "aksi"}, []string{"40%", "40%", "20%"}, tr(), pagination())
}

templ CssCoba() {
}

templ JsCoba() {
}

templ tr() {
	<tr>
		<td>001</td>
		<td>Admin</td>
		<td>
			<div class="row px-5 d-flex justify-content-around">
				<button type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2">Edit</button>
				<button type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2">Hapus</button>
			</div>
		</td>
	</tr>
	<tr>
		<td>002</td>
		<td>Tes</td>
		<td>
			<div class="row px-5 d-flex justify-content-around">
				<button type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2">Edit</button>
				<button type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2">Hapus</button>
			</div>
		</td>
	</tr>
}

templ pagination() {
	<div class="d-flex justify-content-between align-items-center flex-wrap">
		<div class="d-flex flex-wrap py-2 mr-3">
			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">...</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">23</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1">24</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">25</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">26</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">27</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">28</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">...</a>
			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
		</div>
	</div>
}

templ ShowCoba(title string, cmp templ.Component, css templ.Component, js templ.Component, dataMenu []services.MasterMenu, dataUser models.User) {
	@layout.CorporateLayout(title, css, js, dataMenu, dataUser) {
		@cmp
	}
}
