<!DOCTYPE html>
<html>
<head>
    {% load static %}
    {% include "chlamdb/header.html" %}
    {% load custom_tags %}
    <script type="text/javascript" src="{% static 'js/mark.min.js' %}?v1"></script>
</head>

<body>
    <div class="container-fluid" id="main_container">
        <div class="row">
            <div id="wrapper">
                <div id="page-content-wrapper">
                    <div class="row">
                        <div class="col-lg-12">
                            {% include "chlamdb/menu.html" %}

                            {% if search_failed %}

                                <div class="panel panel-warning" style="width:80% ; top: 200px; margin: 10px 10px 10px 10px">
                                    <div class="panel-heading" style="width:100%">
                                        <h3 class="panel-title">This is not the protein you're looking for</h3>
                                        Try a better search term, you must.
                                    </div>
                                    <p style="margin: 0px 0px 0px 10px">
                                </div>

                            {% else %}
                                <h3>Search results </h3>
                                {% include "chlamdb/result_tabs.html" %}

                            {% endif %}
                        </div> <!-- column -->
                    </div> <!-- row -->
                </div> <!-- page-content-wrapper -->
            </div>
        </div>
    </div>
</body>
{% include "chlamdb/style_menu.html" %}
<style>
mark{
    background: orange;
    color: black;
}
</style>
<script>
  var options = {
      "ignoreJoiners": true,
      "wildcards": "enabled",
      "exclude": [
          "h3",
          ".byline *",
          "th"
      ]
  };

  $(document).ready(function() {
    $('#search_table1').DataTable( {
        dom: 'Bfrtip',
        buttons: [ ],
        "paging":   false,
        "ordering": true,
        "info":     false,
        colReorder: true,
        fixedHeader: true
    });
  });


  $(document).ready(function() {
    var docu = document.getElementById("wrapper");
    var instance = new Mark(docu);
    instance.mark("{{search_term_edit}}", options);
  } );

</script>

<style>

table td.wrapcol {
  word-break: break-all;
  word-wrap: break-word;
  width: auto;
}

</style>

</html>
