watched_videos.templ
2111 bytes
1package pages
2
3import (
4 "fmt"
5
6 "github.com/TheEdgeOfRage/ytrssil-api/models"
7)
8
9templ watchedVideoCard(video models.Video) {
10 <div class="card">
11 @thumbnail(video)
12 <div class="card-body">
13 <p class="card-title text-truncate mb-0">{ video.Title }</p>
14 <p class="d-flex justify-content-between">
15 <a
16 target="_blank"
17 rel="noopener"
18 data-open-in-safari
19 href={ fmt.Sprintf("https://www.youtube.com/channel/%s", video.ChannelID) }
20 class="card-text fw-light link-light link-underline-opacity-0"
21 >{ video.ChannelName }</a>
22 <span>
23 { video.HumanizedPublishTime() }
24 </span>
25 </p>
26 <div class="d-flex justify-content-end">
27 <button
28 data-on:click={ fmt.Sprintf("@patch('/videos/%s/unwatch')", video.ID) }
29 class="btn btn-secondary"
30 >
31 <i class="bi bi-arrow-counterclockwise"></i>
32 </button>
33 </div>
34 </div>
35 </div>
36}
37
38templ WatchedVideosPage(videos []models.Video, currentPage int) {
39 @BaseLayout("ytrssil - Watched Videos", "watched") {
40 <div class="row">
41 for _, video := range videos {
42 <div id={ fmt.Sprintf("video-card-%s", video.ID) } class="video-card col-md-3 p-2" data-title={ video.Title } data-channel-name={ video.ChannelName }>
43 @watchedVideoCard(video)
44 </div>
45 }
46 </div>
47 <div class="row mt-4 mb-4">
48 <div class="col-12 d-flex justify-content-center align-items-center gap-3">
49 if currentPage > 1 {
50 <a href={ templ.SafeURL(fmt.Sprintf("/watched?page=%d", currentPage-1)) } class="btn btn-primary">
51 <i class="bi bi-arrow-left"></i> Previous
52 </a>
53 } else {
54 <button class="btn btn-primary" disabled>
55 <i class="bi bi-arrow-left"></i> Previous
56 </button>
57 }
58 <span class="text-light">Page { fmt.Sprintf("%d", currentPage) }</span>
59 if len(videos) == 100 {
60 <a href={ templ.SafeURL(fmt.Sprintf("/watched?page=%d", currentPage+1)) } class="btn btn-primary">
61 Next <i class="bi bi-arrow-right"></i>
62 </a>
63 } else {
64 <button class="btn btn-primary" disabled>
65 Next <i class="bi bi-arrow-right"></i>
66 </button>
67 }
68 </div>
69 </div>
70 }
71}