{% extends "base.html" %}
{% block stylesheet %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/fontawesome.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/jquery.selectareas.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/jquery-ui.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/jquery-ui.theme.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/jquery-ui.structure.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/workspace.css') }}">
{% endblock %}

{% block workspace %}
  {% if imagepaths is not none %}
    <div class="container">
      <div class="row pb-4">
        <div class="col-md-12">
          <h2>Workspace - {{ filename }}</h2>
        </div>
      </div>
      <div class="row">
        <section class="col-md-2"></section>
        <section class="col-md-8">
          <div class="jumbotron control-panel">
            <div class="btn-group">
              <button id="select-rule" type="button" class="btn btn-info dropdown-toggle mr-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select Saved Rule</button>
              <div class="dropdown-menu" aria-labelledby="select-rule">
                <h6 class="dropdown-header">Saved Rules</h6>
                {% if saved_rules is not none %}
                  {% for rule in saved_rules %}
                    <a class="dropdown-item" href="#" data-rule-id="{{ rule.rule_id }}" onclick="onSavedRuleClick(this)">{{ rule.rule_name }}</a>
                  {% endfor %}
                {% endif %}
              </div>
            </div>
            <button type="button" class="btn btn-secondary detect-areas mr-2" onclick="onDetectAreasClick(this)"><i class="fas fa-eye mr-2"></i>Autodetect Tables</button>
            <button type="button" id="reset-areas" class="btn btn-secondary reset-areas mr-2" onclick="resetTableAreas()"><i class="fas fa-trash-alt mr-2"></i>Clear Tables</button>
          </div>
        </section>
        <section class="col-md-2">
          <button type="button" onclick="startJob()" class="btn btn-success"><i class="fas fa-table mr-2"></i>View and Download Data</button>
        </section>
      </div>
      <div class="row">
        <section class="col-md-2">
          <div class="row mx-0 thumbnail-container">
            <div class="col-md-12 col-sm-12 col-xs-12">
              <ul id="thumbnail-list" class="thumbnail-list">
                {% for page, imagepath in imagepaths.items() %}
                  <li id="thumbnail-page">
                    <a href="#image-div-{{ page }}">
                      <img src="{{ imagepath }}" id="image" class="img-thumbnail"/>
                    </a>
                    <p class="text-center">{{ page }}</p>
                  </li>
                {% endfor %}
              </ul>
            </div>
          </div>
        </section>
        <section class="col-md-8" data-spy="scroll" data-target="#thumbnail-list">
          <div class="jumbotron page-container">
            {% for page, imagepath in imagepaths.items() %}
              <div class="row mx-0 mb-2">
                <div class="col-md-3 col-sm-3 col-xs-3">
                  <button type="button" class="btn btn-block btn-primary add-separator mt-1" onclick="onAddSeparatorClick(this)" data-page="{{ page }}" disabled><i class="fas fa-columns mr-2"></i>Add column</button>
                </div>
              </div>
              <div class="row mx-0 mb-2">
                <div class="col-md-12 col-sm-12 col-xs-12">
                  <div id="image-div-{{ page }}">
                    <img src="{{ imagepath }}" id="image-{{ page }}" class="image-area"/>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </section>
        <section class="col-md-2">
          <div class="row mx-0 mb-3 card">
            <div class="card-body">
              <div class="card-title">
                <h5>Advanced</h5>
                <h6><a href="https://camelot-py.readthedocs.io/en/master/user/advanced.html" target="_blank">See docs</a></h6>
              </div>
              <form class="form-group">
                <div class="row py-3">
                  <div class="col-md-12">
                    <label for="flavors">Flavor</label>
                    <select class="form-control" name="flavors" id="flavors" onchange="onFlavorChange()">
                      <option selected disabled>Select flavor</option>
                      <option value="Lattice">Lattice</option>
                      <option value="Stream">Stream</option>
                    </select>
                  </div>
                    <div class="row mx-0 lattice mt-3" style="display: none">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label for="process-background">Process background</label>
                          <input type="text" class="form-control" id="process-background" aria-describedby="process-background-help" placeholder="false">
                          <small id="process-background-help" class="form-text text-muted">Process background lines.</small>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <label for="line-size-scaling">Detect small lines</label>
                          <input type="text" class="form-control" id="line-size-scaling" aria-describedby="line-size-scaling-help" placeholder="15">
                          <small id="line-size-scaling-help" class="form-text text-muted">Small lines can be detected by increasing this value. Range: 15-100</small>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <label for="split-text-l">Cut text</label>
                          <input type="text" class="form-control" id="split-text-l" aria-describedby="split-text-l-help" placeholder="false">
                          <small id="split-text-l-help" class="form-text text-muted">Cut text along column separators.</small>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <label for="flag-size-l">Detect superscripts</label>
                          <input type="text" class="form-control" id="flag-size-l" aria-describedby="flag-size-l-help" placeholder="false">
                          <small id="flag-size-l-help" class="form-text text-muted">Detect super and subscripts.</small>
                        </div>
                      </div>
                    </div>
                    <div class="row mx-0 stream mt-3" style="display: none">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label for="row-close-tol">Group into row</label>
                          <input type="text" class="form-control" id="row-close-tol" aria-describedby="row-close-tol-help" placeholder="2">
                          <small id="row-close-tol-help" class="form-text text-muted">Group vertically closer text lines together into the same row. Range: 10-50</small>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <label for="col-close-tol">Group into column</label>
                          <input type="text" class="form-control" id="col-close-tol" aria-describedby="col-close-tol-help" placeholder="0">
                          <small id="col-close-tol-help" class="form-text text-muted">Group horizontally closer text lines together into the same column. Range: 10-50</small>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <label for="split-text-s">Cut text</label>
                          <input type="text" class="form-control" id="split-text-s" aria-describedby="split-text-s-help" placeholder="false">
                          <small id="split-text-s-help" class="form-text text-muted">Cut text along column separators.</small>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <label for="flag-size-s">Detect superscripts</label>
                          <input type="text" class="form-control" id="flag-size-s" aria-describedby="flag-size-s-help" placeholder="false">
                          <small id="flag-size-s-help" class="form-text text-muted">Detect super and subscripts.</small>
                        </div>
                      </div>
                    </div>
                </div>
              </form>
            </div>
          </div>
        </section>
      </div>
    </div>
  {% else %}
    <div class="container">
      <div class="jumbotron">
        <h1 class="display-4">Refresh</h1>
        <p class="lead">Please wait while the pages are converted to images. Refresh again in some time.</p>
      </div>
    </div>
  {% endif %}
{% endblock %}

{% block javascript %}
<script type="text/javascript" src="{{ url_for('static', filename='js/vendor/jquery.selectareas.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/vendor/jquery.selectareas.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/vendor/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/workspace.js') }}"></script>
<script type="text/javascript">
  const fileDims = JSON.parse('{{ filedims|safe }}');
  const imageDims = JSON.parse('{{ imagedims|safe }}');
  const detectedAreas = JSON.parse('{{ detected_areas|safe }}');
</script>
{% endblock %}
