{{ 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" }}
    <form hx-delete="/models/train" hx-headers='{"REQUEST-TYPE": "html"}' hx-swap="outerHTML" {{ if .Error }} class="submitted" {{end}} >
        data menu
    </form>
{{ 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>
      {{ else if (eq .Model.Status 2) }}
        {{ template "base-model-card" . }}
        {{ template "data-model-card" . }}
        {{ template "train-model-card" . }}
        {{ template "delete-model-card" . }}
      {{ else }}
        <h1>
            Unknown Status of the model.
        </h1>
      {{ end }}
  </main>
{{ end }}