{% extends 'viz_base.html' %}

{% block customcss %}

<style>

html {
    overflow-x: hidden;
    overflow-y: scroll;
}

#searchResultPanelBody{
    max-height: 50%; 
    overflow: auto;
}

#amendmentDetailsPanelBody {
    max-height: 50%;
}


#edgeDetailPanelBody {
    max-height: 100%;
    overflow: auto;
}

#lawModalNamedEntities {
    overflow-x: auto;
    white-space: nowrap;
    overflow-y: hidden;
    /* overflow-y: hidden; */
}

.entity-label {
    font-size: small;
    margin-left: 2px;
    margin-right: 2px;

}

#filterSearchResult {
    background: inherit;
}

#filterSearchResult:focus {
    outline: none;
}

::placeholder {
    color: whitesmoke;
}

</style>

{% endblock %}

{% block body %}



<div class="row">
    <div class="col-md-3">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-info">
            <div class="panel-heading">
                <div class="row container">
                    <h3 class="panel-title" id="searchResultPanelTitle">Search Result</h3>
                    <input type="text" id="filterSearchResult" onkeyup="filterSearchLaws()" placeholder="Filter Laws ... ">
                </div>
            </div>
                <div class="panel-body" id="searchResultPanelBody">  
            </div>
        </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-primary" id="amendmentPanel">
                        <div class="panel-heading">
                            <h3 class="panel-title" id="amendmentPanelTitle">Amendments</h3>
                        </div>
                            <div class="panel-body" id="amendmentPanelBody">  
                            </div>
                    </div>
            </div>
        </div>
    </div>

    <div class="col-md-6" id="networkColumn">
        <div id="mynetwork" style="min-height: 400px;">

        </div>
    </div>

    <div class="col-md-3">
        <div class="row">
            <div class="col-md-12">
                 <div class="panel panel-success" id="edgeDetailPanel">
                        <div class="panel-heading">
                            <h3 class="panel-title" id="connectionDetailsTitle">Citation Details</h3>
                        </div>
                        <div class="panel-body" id="edgeDetailPanelBody"> 
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>



<!-- Modal -->
<div class="modal fade" id="lawModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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 text-center" id="lawModalTitle">Modal title</h4>
      </div>
      <div class="modal-body" id="lawModalBody">
          <!-- Header for named entities -->
          <div class="row" id="lawModalNamedEntities">
              
          </div>

          <div class="row" id="lawModalBodyText">

              <!-- Law text  -->
              <div class="col-md-8">
                  <h5 id="volume"></h5>
                  <p id="date"></p>
                  <p id="subtitle"></p>
                  <p id="preamble"></p>
                  <table id="section" class="table context">
                        <thead>
                            <tr>
                                <th>Section Title</th>
                                <th>Section Details</th>
                            </tr>

                            <tbody id="sectionTableBody">
                            </tbody>
                        </thead>
                  </table>
              </div>

              <!-- <div class="col-md-5" id="viz" style="width: 100%; height: 400px;">
                    
              </div> -->
              <div class="col-md-4">
                  <div class="row modal-fixed">
                       <!-- 500px; height: 500px; style="width: 100%; height: 100%;" -->
                      <div id="viz" >
                          <div class="row">
                                <h4>Retrieved Sections</h4>
                                <div class="context" id="sections">
                                    
                                </div>

                                <!-- <div class="col-md-8" id="tagcloud">
                                    
                                </div> -->
                          </div>
                      </div>
                  </div>
              </div>

               <!-- Inner Network Viz  
              <div class="col-md-5" id="innerViz">    
                    <div class="modal-fixed" id="innerNetwork" style="min-height: 400px;">
                        
                    </div>
              </div> -->
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
    // Search function 
    function filterSearchLaws(){
        var input, filter, ul, li, a, i;
        input = document.getElementById("filterSearchResult");
        filter = input.value.toUpperCase();
        ul = document.getElementById("resultList");
        li = ul.getElementsByTagName('li');

        for (i = 0; i < li.length; i++){
            lawtitle = li[i].getElementsByTagName("i")[0];
            if (lawtitle.innerHTML.toUpperCase().indexOf(filter) >  -1){
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }
</script>


{% endblock %}