mozhi/views/index.html

{{template "header" .}}
<main>
  <!-- Need to do this custom selector thingy since <select> cant submit on click -->
  <div class="custom-select">
    Translate with: <a href="#" class="selected-option">{{.Engine}}</a>
    <ul class="options">
      {{range .enginesNames}}
      <a href="/?engine={{.}}"><li>{{.}}</li></a>
      {{end}}
    </ul>
  </div>

  <br /><br />
  <form action="/" method="GET" id="translation-form">
    <!-- This hidden input is so that the engine gets sent in the GET request even though its not declared here -->
    <input name="engine" value="{{.Engine}}" type="hidden" />

    <div class="wrap languages">
      <div class="language">
        <select name="from" aria-label="Source language">
          {{range $key, $value := .SourceLanguages}}
          <option value="{{ .Id }}" {{if eq $.From .Id}}selected{{end}}>
            {{ .Name }}
          </option>
          {{end}}
        </select>
      </div>

      <div class="switch_languages">
        <button
          id="switchbutton"
          aria-label="Switch languages"
          formaction="/switchlanguages?engine={{ .Engine }}"
          type="submit"
        >
          &lt;-&gt;
        </button>
      </div>

      <div class="language">
        <select name="to" aria-label="Target language">
          {{range $key, $value := .TargetLanguages}}
          <option value="{{ .Id }}" {{if eq $.To .Id}}selected{{end}}>
            {{ .Name }}
          </option>
          {{end}}
        </select>
      </div>
    </div>

    <div class="wrap">
      <div class="item-wrapper">
        <textarea
          autofocus
          class="item"
          id="input"
          name="text"
          dir="auto"
          placeholder="Enter Text Here"
        >
{{ .OriginalText }}</textarea
        >
        {{if .TtsFrom}}
        <audio controls>
          <source type="audio/mpeg" src="{{ .TtsFrom }}" />
        </audio>
        {{end}}
      </div>

      <div class="item-wrapper">
        <textarea
          id="output"
          class="translation item"
          dir="auto"
          placeholder="Translation"
          readonly
        >
{{.Translation.OutputText}}</textarea
        >
        {{if .Translation.AutoDetect}}
        <p>
          Detected Language: {{.Translation.AutoDetect}}{{end}} {{if .TtsTo}}
          <audio controls>
            <source type="audio/mpeg" src="{{ .TtsTo }}" />
          </audio>
          {{end}}
        </p>
      </div>
    </div>
    <div style="text-align: center">
      <button type="submit">Translate with {{ .Engine }}!</button>
    </div>
  </form>
</main>
{{ template "footer" .}}