<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="/static/favicon.svg">

    <link rel="stylesheet" type="text/css" href="/static/index4.css" media="all">
    <title>ODS</title>
  </head>
  <body>
    <main>
	  <form action="/" method="post">
        <input class="fullwidth" type="text" placeholder="Entrez un mot" id="query" name="query" value="{{ .Query }}" minlength="2" maxlength="32" onfocus="this.select()" required autofocus/>
		<div class=".btn-group">
		  <input type="submit" value="Valider"/>
		  {{ if ne .Query "" }}
		  <input type="submit" formmethod="GET" value="Effacer"/>
		  {{ end }}
		</div>
	  </form>
	  <p>
        {{ if ne .Query "" }}
        <a href="https://dictionnaire.lerobert.com/definition/{{ .Query }}">{{ .Query }}</a> est un mot <span class="{{ if .Invalid }}invalid">IN{{ else }}valid">{{ end }}VALIDE</span> au scrabble.
        {{ end }}
	  </p>
    </main>
  </body>
</html>