2 files changed, 84 insertions, 0 deletions
diff --git a/templates/base.qtpl b/templates/base.qtpl
new file mode 100644
index 0000000..cbde355
--- /dev/null
+++ b/templates/base.qtpl
@@ -0,0 +1,47 @@
+This is a base page template. All the other template pages implement this interface.
+
+{% interface
+Page {
+	Title()
+	Content()
+    Script()
+}
+%}
+
+
+Page prints a page implementing Page interface.
+{% func PageTemplate(p Page) %}
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>img | {%= p.Title() %}</title> 
+        <link rel="stylesheet" href="/static/main.css">
+        <link rel="icon" href="/static/square.svg" sizes="any" type="image/svg+xml">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+    <body>
+        <nav class="navbar">
+            <div class="navbar-start">
+                <a href="/fs" class="navbar-item">
+                    files
+                </a>
+                <a href="/media" class="navbar-item">
+                    media
+                </a>
+                <a href="/settings" class="navbar-item">
+                    settings
+                </a>
+            </div>
+        </nav>
+        <div class="container">
+            {%= p.Content() %}
+        </div>
+    </body>
+    {%= p.Script() %}
+</html>
+{% endfunc %}
+
+{% code type BasePage struct {} %}
+{% func (p *BasePage) Title() %}Empty{% endfunc %}
+{% func (p *BasePage) Body() %}HelloWorld{% endfunc %}
+{% func (p *BasePage) Script() %}{% endfunc %}
diff --git a/templates/media.qtpl b/templates/media.qtpl
new file mode 100644
index 0000000..88ce582
--- /dev/null
+++ b/templates/media.qtpl
@@ -0,0 +1,37 @@
+{% import "git.sr.ht/~gabrielgio/img/pkg/database/repository" %}
+
+{% code
+type MediaPage struct {
+	Medias []*repository.Media
+	Next   *repository.Pagination
+}
+%}
+
+{% func (p *MediaPage) Title() %}
+Media
+{% endfunc %}
+
+
+{% func (p *MediaPage) Content() %}
+<div class="columns is-multiline">
+{% for _, media := range p.Medias %}
+    <div class="card-image">
+       {% if media.IsVideo() %}
+       <video controls muted="true" poster="/media/thumbnail?path_hash={%s media.PathHash %}" preload="none">
+           <source src="/media/image?path_hash={%s media.PathHash %}" type="{%s media.MIMEType %}">
+       </video>
+       {% else %}
+        <figure class="image is-fit">
+            <img src="/media/thumbnail?path_hash={%s media.PathHash %}">
+        </figure>
+        {% endif %}
+    </div>
+{% endfor %}
+</div>
+<div class="row">
+    <a href="/media?page={%d p.Next.Page %}" class="button is-pulled-right">next</a>
+</div>
+{% endfunc %}
+
+{% func (p *MediaPage) Script() %}
+{% endfunc %}