{{define "playground"}}{{template "header" .}}
{{if .EngineError}}
<div class="alert alert-warning"><i class="fa-solid fa-triangle-exclamation me-2"></i>Engine unavailable: {{.EngineError}}</div>
{{end}}
<form method="POST" action="/admin/playground" class="card card-body shadow-sm mb-4">
  <input type="hidden" name="csrf" value="{{csrf}}">
  <div class="row g-3">
    <div class="col-md-4">
      <label class="form-label" for="source">Source</label>
      <select class="form-select" id="source" name="source">
        <option value="auto"{{if eq .Source "auto"}} selected{{end}}>Auto-detect</option>
        {{range .Languages}}<option value="{{.Code}}"{{if eq $.Source .Code}} selected{{end}}>{{.Name}} ({{.Code}})</option>{{end}}
      </select>
    </div>
    <div class="col-md-4">
      <label class="form-label" for="target">Target</label>
      <select class="form-select" id="target" name="target">
        {{range .Languages}}<option value="{{.Code}}"{{if eq $.Target .Code}} selected{{end}}>{{.Name}} ({{.Code}})</option>{{end}}
      </select>
    </div>
    <div class="col-md-4 d-flex align-items-end">
      <button class="btn btn-mk w-100" type="submit"><i class="fa-solid fa-language me-1"></i>Translate</button>
    </div>
    <div class="col-12">
      <label class="form-label" for="q">Text</label>
      <textarea class="form-control" id="q" name="q" rows="4" placeholder="Type text to translate…">{{if .Q}}{{.Q}}{{end}}</textarea>
    </div>
  </div>
</form>
{{if .TransError}}
<div class="alert alert-danger"><i class="fa-solid fa-circle-exclamation me-2"></i>{{.TransError}}</div>
{{end}}
{{if .Result}}
<div class="card shadow-sm">
  <div class="card-header text-body-secondary"><i class="fa-solid fa-arrow-right-arrow-left me-1"></i>Translation</div>
  <div class="card-body"><p class="mb-0" style="white-space:pre-wrap;">{{.Result}}</p></div>
</div>
{{end}}
{{template "footer" .}}{{end}}