{{ define "title" }}
    Model: {{ .Model.Name }}
{{ end }}

{{ define "base-model-card" }}
    <div class="card model-card">
      <h1>
          {{ .Model.Name }}
      </h1>
      <div class="second-line">
          <img src="/savedData/{{ .Model.Id }}/baseimage.png" />
          <div class="info">
              <div>
                  <span class="bold bigger">Image Type:</span> {{ .Model.Color_mode }}
              </div>
              <div>
                  <span class="bold bigger">Image Size:</span> {{ .Model.Width }}x{{ .Model.Height }}
              </div>
          </div>
      </div>
    </div>
{{ end }}

{{ define "delete-model-card" }}
    <form hx-delete="/models/delete" hx-headers='{"REQUEST-TYPE": "html"}' hx-swap="outerHTML" {{ if .Error }} class="submitted" {{end}} >
        <fieldset>
            <span>
                To delete this model please type "{{ .Model.Name }}":
            </span>
            <label for="name">Name</label>
            <input name="name" id="name" required />
            {{ if .NameDoesNotMatch }}
                <span class="form-msg red">
                    Name does not match "{{ .Model.Name }}"
                </span>
            {{ end }}
        </fieldset>
        <input type="hidden" name="id" value="{{ .Model.Id }}" />
        <button class="danger">
            Delete
        </button>
    </form>
{{ end }}

{{/* Is called from a diffrent endpoint so that it does not matter where this is from :) which means that . can mean what ever I want */}}
{{ define "data-model-create-class-table-table" }}
<div>
    <table>
        <thead>
            <tr>
                <th>
                    File Path
                </th>
                <th>
                    Mode
                </th>
                <th>
                    <!-- Img -->
                </th>
            </tr>
        </thead>
        <tbody>
            {{range .List}}
                <tr>
                    <td>
                        {{.FilePath}}
                    </td>
                    <td>
                        {{ if (eq .Mode 2) }}
                            Testing
                        {{ else }}
                            Training
                        {{ end }}
                    </td>
                    <td class="text-center">
                        {{ if startsWith .FilePath "file://" }}
                            <img src="/savedData/{{ $.ModelId }}/data/{{ if (eq .Mode 2) }}testing{{ else }}training{{ end }}/{{ $.Name }}/{{ replace .FilePath "file://" "" 1 }}" height="30px" width="30px" style="object-fit: contain;" />
                        {{ else }}
                            TODO
                            img {{ .FilePath }}
                        {{ end }}
                    </td>
                </tr>
            {{end}}
        </tbody>
    </table>
    <div class="flex justify-center align-center">
        <div class="grow-1 flex justify-end align-center ">
            {{ if gt .Page 0 }}
                <button 
                    hx-get="/models/data/list?id={{ .Id }}&page={{ add .Page -1 }}"
                    hx-target=".content[data-tab='{{ .Name }}']"
                    hx-swap="innerHTML"
                    hx-headers='{"REQUEST-TYPE": "html"}'
                    data-tab="{{ .Name }}">
                    Prev
                </button>
            {{ end }}
        </div>
        
        <div style="padding: 10px;">
            {{ .Page }}
        </div>

        <div class="grow-1 flex justify-start align-center">
            {{ if lt (mul .Page 10) .Count }}
                <button 
                    hx-get="/models/data/list?id={{ .Id }}&page={{ add .Page 1 }}"
                    hx-target=".content[data-tab='{{ .Name }}']"
                    hx-swap="innerHTML"
                    hx-headers='{"REQUEST-TYPE": "html"}'
                    data-tab="{{ .Name }}">
                    Next
                </button>
            {{ end }}
        </div>
    </div>
</div>
{{ end }}

{{ define "data-model-create-class-table" }}
    {{ if eq (len .Classes) 0 }}
        TODO CREATE TABLE
    {{else}}
        <div class="tabs">
            {{/* Handle the case where there are to many buttons */}}
            {{ range .Classes }}
                {{/* TODO Auto Load 1st */}}
                <button 
                    hx-get="/models/data/list?id={{ .Id }}"
                    hx-target=".content[data-tab='{{ .Name }}']"
                    hx-swap="innerHTML"
                    hx-headers='{"REQUEST-TYPE": "html"}'
                    class="tab" 
                    data-tab="{{ .Name }}">
                    {{ .Name }}
                </button>
            {{ end }}
            {{ range .Classes }}
                <div 
                    class="content" 
                    data-tab="{{ .Name }}"
                    hx-get="/models/data/list?id={{ .Id }}"
                    hx-target=".content[data-tab='{{ .Name }}']"
                    hx-trigger="load"
                    hx-swap="innerHTML"
                    hx-headers='{"REQUEST-TYPE": "html"}'>
                </div>
            {{ end }}
        </div>
    {{end}}
{{ end }}

{{ define "data-model-card" }}
    <div class="card">
        <h3>
            Training data
        </h3>
        {{ if eq (len .Classes) 0 }}
            <p>
                You need to upload data so the model can train.
            </p>
            <div class="tabs">
                <button class="tab" data-tab="upload">
                    Upload
                </button>
                <button class="tab" data-tab="create_class">
                    Create Class
                </button>
                <button class="tab" data-tab="api">
                    Api
                </button>
                <div class="content" data-tab="upload">
                    <form hx-headers='{"REQUEST-TYPE": "htmlfull"}' enctype="multipart/form-data" hx-post="/models/data/upload">
                        <input type="hidden" name="id" value={{.Model.Id}} />
                        <fieldset class="file-upload" >
                            <label for="file">Data file</label>
                            <div class="form-msg">
                                Please provide a file that has the training and testing data<br/>
                                The file must have 2 folders one with testing images and one with training images. <br/>
                                Each of the folders will contain the classes of the model. The folders must be the same in testing and training.
                                The class folders must have the images for the classes.
<pre>
    training\
        class1\
            img1.png
            img2.png
            img2.png
            ...
        class2\
            img1.png
            img2.png
            img2.png
            ...
        ...
    testing\
        class1\
            img1.png
            img2.png
            img2.png
            ...
        class2\
            img1.png
            img2.png
            img2.png
            ...
        ...
</pre>
                            </div>
                            <div class="icon-holder">
                                <button class="icon">
                                    <img replace="icon" src="/imgs/upload-icon.png" />
                                    <span replace="File Selected">
                                        Upload Zip File
                                    </span>
                                </button>
                                <input id="file" name="file" type="file" required accept="application/zip" />
                            </div>
                        </fieldset>
                        <button>
                            Add
                        </button>
                    </form>
                </div>
                <div class="content" data-tab="create_class">
                    {{ template "data-model-create-class-table" . }}
                </div>
                <div class="content" data-tab="api">
                    TODO
                </div>
            </div>
        {{ else }}
            <p>
                You need to upload data so the model can train.
            </p>
            <div class="tabs">
                <button class="tab" data-tab="create_class">
                    Create Class
                </button>
                <button class="tab" data-tab="api">
                    Api
                </button>
                <div class="content" data-tab="create_class">
                    {{ template "data-model-create-class-table" . }}
                </div>
                <div class="content" data-tab="api">
                    TODO
                </div>
            </div>
        {{ end }}
    </div>
{{ end }}

{{ define "train-model-card" }}
    <form hx-delete="/models/train" hx-headers='{"REQUEST-TYPE": "html"}' hx-swap="outerHTML" {{ if .Error }} class="submitted" {{end}} >
        tain menu
    </form>
{{ end }}

{{ define "mainbody" }}
  <main>
      {{ if (eq .Model.Status 1) }}
          <div>
              <h1 class="text-center">
                  {{ .Model.Name }}
              </h1>
              <!-- TODO add cool animation -->
              <h2 class="text-center">
                  Preparing the model
              </h2>
          </div>
      {{ else if (eq .Model.Status -1) }}
          <div>
              <h1 class="text-center">
                  {{ .Model.Name }}
              </h1>
              <!-- TODO improve message -->
              <h2 class="text-center">
                  Failed to prepare model
              </h2>

              <form hx-delete="/models/delete">
                  <input type="hidden" value="{{ .Model.Id }}" />
                  <button class="danger">
                      Delete
                  </button>
              </form>
          </div>
      {{/* PRE TRAINING STATUS */}}
      {{ else if (eq .Model.Status 2) }}
        {{ template "base-model-card" . }}
        {{ template "data-model-card" . }}
        {{ template "train-model-card" . }}
        {{ template "delete-model-card" . }}
      {{/* FAILED TO PROCCESS THE ZIPFILE */}}
      {{ else if (eq .Model.Status -2)}}
        {{ template "base-model-card" . }}
        <form hx-delete="/models/data/delete-zip-file" hx-headers='{"REQUEST-TYPE": "html"}' hx-swap="outerHTML">
            Failed to proccess the zip file.<br/>
            Delete file and proccess afain.<br/>
            <br/>
            <div class="spacer" ></div>
            <input type="hidden" name="id" value="{{ .Model.Id }}" />
            <button class="danger">
                Delete Zip File
            </button>
        </form>
        {{ template "delete-model-card" . }}
      {{/* PROCCESS THE ZIPFILE */}}
      {{ else if (eq .Model.Status 3)}}
        {{ template "base-model-card" . }}
        <div class="card" hx-get="/models/edit?id={{ .Model.Id }}" hx-headers='{"REQUEST-TYPE": "htmlfull"}' hx-push="true" hx-swap="outerHTML" hx-target=".app" hx-trigger="load delay:2s" >
            {{/* TODO improve this */}}
            Processing zip file...
        </div>
      {{ else }}
        <h1>
            Unknown Status of the model.
        </h1>
      {{ end }}
  </main>
{{ end }}