<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>EditorX - Upload Complete</title>
    <!-- include libraries(jQuery, bootstrap) -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

    <!-- include summernote css/js and custome styles-->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
    <link rel="stylesheet" href="/static/css/styles.css"/>
    <link rel="stylesheet" href="/static/css/dropzone.css"/>
    <script src="static/js/summernote-ext-print.js"></script>

  </head>
  <body>
    <div class="container-fluid">
      <div class="row align-items-center">
        <div class="jumbotron col-md-7 col-lg-7" style="height: 100%;">
              <h3 class="text-center" style="color:#353535;">EditorX</h3>
              <p class="text-center" style="color:#888;">Prototype built with Python and OpenCV</p> 
              <div class="align-items-left" id="summernote"></div>  
              <script>
                $(document).ready(function() {
                    $('#summernote').summernote({
                        height: 600,
                        minHeight: 300,
                        direction: 'rtl',
                        toolbar: [
                            // [groupName, [list of button]]
                            ['style', ['bold', 'italic', 'underline', 'clear']],
                            ['font', ['strikethrough', 'superscript', 'subscript']],
                            ['fontsize', ['fontsize']],
                            ['color', ['color']],
                            ['para', ['ul', 'ol', 'paragraph']],
                            ['height', ['height']],
                            ['table', ['table']],
                            ['insert', ['link', 'picture']],
                            ['view', ['fullscreen', 'codeview', 'help']],
                            ['misc', ['print']]
                        ],
                    });
                    $('#summernote').summernote('justifyLeft');
                    $('#summernote').summernote('code', '{{text}}');
                   
                });
              </script>
        </div>

        <div class="text-center col-md-5 col-lg-5" style="height: 100%;">
            {% if filepath %}
              <img src="{{filepath}}" alt="cropped image" class="img-responsive" style="padding: 100px 100px 100px 100px; max-height: 900px"> 
            {% else %}
              <h1>no image for whatever reason</h1>
            {% endif %}

        </div>

      </div>
    </div>
  </body>
</html>
