{{template "header" .}}
<main>
  <!-- Need to do this custom selector thingy since <select> cant submit on click -->
  <div class="custom-select">
    {{range $key, $value := .enginesNames}} {{ if eq $.Engine $key }}Translate
    with: <a href="#" class="selected-option">{{$value}}</a> {{end}} {{end}}
    <ul class="options">
      {{range $key, $value := .enginesNames}}
      <a href="/?engine={{$key}}">
        <li>{{$value}}</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" id="sourceLanguage">
          {{range $key, $value := .SourceLanguages}} {{if $.From}}
          <option value="{{ .Id }}" {{if eq $.From .Id}}selected{{end}}>
            {{ .Name }}
          </option>
          {{else}}
          <option value="{{ .Id }}" {{if eq .Id $.defaultLang}}selected{{end}}>
            {{ .Name }}
          </option>
          {{end}} {{end}}
        </select>
      </div>

      <div class="switch_languages">
        <button id="switchbutton" aria-label="Switch languages" formaction="/switchlanguages?engine={{ .Engine }}"
          type="submit">
          <!-- https://icon-sets.iconify.design/ci/arrow-left-right/ -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="m16 13l3 3m0 0l-3 3m3-3H5m3-5L5 8m0 0l3-3M5 8h14" />
          </svg>
        </button>
      </div>

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

    <div class="item-wrapper">
	  Source Text:
      <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>

    {{ if .TranslateAll }}
    {{range $key, $value := .TranslateAll}}
    <div class="item-wrapper">
      Engine: {{.Engine}}
      <textarea class="translation item" dir="auto" placeholder="Translation" readonly>
{{.OutputText}}</textarea>
      {{if .AutoDetect}}
      Detected Language: {{.AutoDetect}}{{end}} {{if $.TtsTo}}
      <audio controls>
        <source type="audio/mpeg" src="{{ $.TtsTo }}" />
      </audio>
      {{end}}
    </div>
    {{end}}
    {{ else }} {{if .TranslationExists}}
    <div class="item-wrapper">
      <textarea class="translation item" dir="auto" placeholder="Translation" readonly>
{{.Translation.OutputText}}</textarea>
      {{if .Translation.AutoDetect}}
      Detected Language: {{.Translation.AutoDetect}}{{end}} {{if .TtsTo}}
      <audio controls>
        <source type="audio/mpeg" src="{{ .TtsTo }}" />
      </audio>
      {{end}}
      {{end}}
      {{end}}
      <button class="wrap" type="submit">
        Translate!
      </button>
  </form>
  <script>
    // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
    // this code submits the translation form when pressing Ctrl/Meta+Enter while focussed on the input text field
    document
      .getElementById("input")
      .addEventListener("keydown", function (event) {
        if (event.keyCode === 13 && (event.metaKey || event.ctrlKey)) {
          document.getElementById("translation-form").submit();
        }
      });
    // This code makes the select language menu searchable if js is enabled
    var options = { searchable: true };
    NiceSelect.bind(document.getElementById("targetLanguage"), options);
    NiceSelect.bind(document.getElementById("sourceLanguage"), options);
  </script>
</main>
{{ template "footer" .}}