{{ header }}{{ column_left }}
{% autoescape %}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
        {% endfor %}
      </ul>

      <div class="pull-right">
        <a href="{{ cancel|raw }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a>
        <div class="btn-group" data-toggle="buttons" id="optionsGroup">
          <label class="btn btn-default {{ interface == 'catalog' ? 'active' : '' }}">
            <input type="radio" name="interface" value="catalog" autocomplete="off" {{ interface == 'catalog' ? 'checked' : '' }}> {{ tab_frontend }}
          </label>
          <label class="btn btn-default {{ interface == 'admin' ? 'active' : '' }}">
            <input type="radio" name="interface" value="admin" autocomplete="off" {{ interface == 'admin' ? 'checked' : '' }}> {{ tab_backend }}
          </label>
        </div>

        <label class="btn btn-primary">
          <input type="checkbox" name="notTranslated" id="notTranslated" autocomplete="off"> {{ text_not_translated_only }}
        </label>
      </div>
    </div><!-- end .container-fluid -->
  </div><!-- end .page-header -->

  <div class="container-fluid">
    {% if error_warning %}
    <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div><!-- end alert-danger -->
    {% endif %}
    

    <div id="helpDiv" class="alert alert-info">
      <p>{{ text_help_errors|format('https://github.com/chrisrollins65/cr_translate_mate', 'http://www.opencart.com/index.php?route=extension/extension/info&extension_id=23098')|raw }}</p>
      <p>{{ text_help_hotkeys|raw }}</p>
      <p>{{ text_help_caution|raw }}</p>
    </div>

    <div id="translateFormsContainer">

      <table class="table table-striped table-hover table-condensed" id="transTable">
        <thead>
          <tr>
            <th class="pageCol">{{ text_page }}</th>
            <th class="keyCol">{{ text_key }}</th>
            {% for languageName in languageNames %}
              <th>{{ languageName }}</th>
            {% endfor %}
          </tr>
          <tr id="searchRow">
            <td id="pageSearchTD" class="pageCol">
              <select name="pageSearch" id="pageSearch" class="form-control">
                <option value="" selected="selected">{{ text_all_pages }}</option>
                {{ fileSelect|raw }}
              </select>
            </td>
            <td id="keySearchTD" class="keyCol">
              <input type="text" name="keySearch" id="keySearch" class="form-control" placeholder="{{ text_search_keys }}">
            </td>
            <td colspan="{{ languageNames|length }}" id="textSearchTD">
              <input type="text" name="textSearch" id="textSearch" class="form-control" placeholder="{{ text_search_text }}">
            </td>
          </tr><!-- end #searchRow -->
        </thead>

        <tbody>
          <!-- Translation strings -->
        </tbody>
      </table><!-- end transTable -->

    </div><!-- end #translateFormsContainer -->

    <p id="noTextsFound">{{ text_no_texts_found }}</p>

    <div id="loadInfoDiv">
      <h2 id="loadingTextsWait"><i class="fa fa-spinner fa-spin"></i> {{ text_loading_please_wait }}</h2>
      <button id="loadMoreBtn" class="btn btn-lg btn-primary"><i class="fa fa-arrow-circle-o-down"></i> {{ text_load_more }}</button>
      <button id="scrollToTopBtn" class="btn btn-lg btn-default"><i class="fa fa-arrow-up"></i></button>
    </div><!-- end #loadInfoDiv -->

  </div><!-- end .container-fluid -->
</div><!-- end #content -->

<div class="modal fade" id="errorModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body"></div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="htmlPreviewModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div id="htmlPreviewSandbox" class="modal-body"></div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- for use in javascript -->
<div id="notTranslatedTemplate">
  <span class="notTranslatedSpan text-danger">{{ text_not_translated }}</span>
</div>
<!-- javascript -->{# declare php variables here #}
<script type="text/javascript">
  var crtm = { // cr_translate_mate object
    url : "{{ action|raw }}",
    error_error : "{{ error_error }}",
    error_unexpected : "{{ error_unexpected }}",
    text_html_preview : "{{ text_html_preview }}",
    text_save_translation : "{{ text_save_translation }}",
    text_cancel : "{{ text_cancel }}"
  };
</script>
{% endautoescape %}
<!-- end javascript -->
{{ footer }}