{{ 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 }}

{{ 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">
                    TODO
                </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">
                    TODO
                </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 }}