{% extends "base.html" %}

{% block content %}
  <div class="centered-flex mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-cell mdl-cell--4-col">
      <form action="/" method="post" name="translate">
        <div class="mdl-textfield mdl-js-textfield">
          <textarea class="mdl-textfield__input" type="text" rows= "3" id="text" name="text">{{default_text}}</textarea>
          <label class="mdl-textfield__label" for="text">Text to translate...</label>
        </div>
        <input type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" value="Translate">
      </form>
    </div>
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-cell mdl-cell--4-col">
      {{translation}}
    </div>
    <div class="mdl-layout-spacer"></div>
  </div>
{% endblock %}