<div class="page-header">
  <div class="page-header-title">
    <h1><%- @T('Translations') %> <small><%= @currentLanguage %></small></h1>
  </div>
  <div class="page-header-meta">
    <a class="btn btn--success js-syncChanges"><%- @T('Get latest translations') %></a>
    <a class="btn btn--danger hidden js-changes js-resetChanges"><%- @T('Reset changes') %></a>
    <a class="btn btn--primary hidden js-changes js-pushChanges"><%- @T('Push my changes') %></a>
  </div>
</div>
<div class="page-content">

  <div class="box box--message">
    <h2><%- @T('Inline translation') %></h2>
    <p><%- @T('To make translations easier you can enable and disable the inline translation feature by pressing "%s".', 'ctrl+alt+t') %></p>
    <p><%- @T('Text with disabled inline translations looks like') %> <button class="btn btn-primary"><%- @Ti('Some Text') %></button></p>
    <p><%- @T('Text with enabled inline translations looks like') %> <button class="btn btn-primary"><span class="translation" contenteditable="true"><%- @Ti('Some Text') %></button></span></p>
    <p><%- @T('Just click into the marker and update the words just in place. Enjoy!') %></p>
    <p><%- @T('If you want to translate it via the translation table, just go ahead below.') %></p>
  </div>

  <div class="js-ToDo"></div>
  <div class="js-List"></div>
</div>
