{% extends 'base.html' %}

{% block scripts %}
  <script src="/static/translations.js" defer></script>
{% endblock %}

{% block header %}
  <h1>{% block title %}{{ localize("translations") }}{% endblock %}</h1>
{% endblock %}

{% block content %}
<button id="add-string-button">{{ localize("add_string") }}</button>
<form method="post">
  {% for language, data in strings.items() %}
  <div id="{{language}}-translation-section" class="translation-section" lang="{{language}}">
    <h2>{{ language }}</h2>
    {% for string, translation in data.items() %}
        <label lang="en" for="{{ string }}">{{ string }}</label>
        <input type="text" id="{{ string }}" name="{{ string }}" value="{{ translation }}">
        <br>
    {% endfor %}
  </div>
    {% endfor %}
    <button type="submit">{{ localize("submit") }}</button>
  
</form>
{% endblock %}