{{#extends "_layout"}}
    {{#override "content"}}
        {{#if saved}}
            {{l10n "Your translation is saved."}}

            <script type="text/javascript" src="{{asset "@CurrentStyle/js/autoclose.js"}}"></script>
        {{else}}
            {{l10n "Enter your translation."}}

            <br/>
            <br/>

            {{> _errors}}

            <form name="translateForm" method="post" action="{{route "translation_edit_save" string_id=key}}">
                {{csrfTokenInput}}

                <div class="form-wrapper">
                    <div class="form-header">
                        <div class="form-header-inwards"></div>
                    </div>

                    <div class="form-inwards">
                        <div class="form-fields">
                            <div class="field">
                                <label for="original" class="field-label">{{l10n "Source string"}}</label>
                                <div class="field-value-no-description">
                                    <textarea id="original" name="original" disabled="disabled" cols="20" rows="5" class="wide">{{formoriginal}}</textarea>
                                </div>
                            </div>

                            <div class="field">
                                <label for="translation" class="field-label">{{localeName}}</label>
                                <div class="field-value-no-description">
                                    <textarea id="translation" name="translation" cols="20" rows="5" class="wide">{{formtranslation}}</textarea>
                                </div>
                            </div>

                            <div class="form-button">
                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                            </div>
                        </div>
                    </div>

                    <div class="form-footer">
                        <div class="form-footer-inwards"></div>
                    </div>
                </div>
            </form>
        {{/if}}
    {{/override}}
{{/extends}}