<!DOCTYPE html> <html>  <head> {% load custom_tags %}
    {% load static %}
    {% load static %}
    {% load crispy_forms_tags %}
    {% include "chlamdb/header.html" %}
</head>

<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" %}
             {% include "chlamdb/extract_nav_tabs_template.html" with type="Pfam" active_tab="det" %}


            <br>
            <p class="page-title"><b>Pfam domains shared by the selected genomes </b><a href="https://zdb.readthedocs.io/en/latest/tutorial/website.html#comparisons" id="show-option" target="_blank" title="Get the list of Pfam domains shared between genomes (selected in panel A) and absent in others (selected in panel B)"><i class="fab fa-info-circle " style="size: 5em;" ></i></a></p></center>



                        {% block content %}
						{% csrf_token %}
						{% crispy form %}
                        {% endblock %}

                    </div>

                    {% if wrong_n_missing %}

                    <div class="panel panel-warning" style="width:500px ; top: 200px; margin: 10px 10px 10px 10px">
                        <div class="panel-heading" style="width:100%">
                            <h3 class="panel-title">Help</h3>
                        </div>
                        <p style="margin: 10px 10px 10px 10px">You cannot set a number of missing data bigger than the number of included genomes</p>
                    </div>

                    {% elif no_match %}

                    <div class="panel panel-warning" style="width:500px ; top: 200px; margin: 10px 10px 10px 10px">
                        <div class="panel-heading" style="width:100%">
                            <h3 class="panel-title"></h3>
                        </div>
                        <p style="margin: 10px 10px 10px 10px">No match</p>
                    </div>

                    {% endif %}


                    {% if envoi_extract %}

                    <div class="row"  style="background-color: rgba(245, 245, 245, 0.986)">
                        <div class="col-lg-12">
                          <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                            <div class="panel panel-success" style="width:60%; top: 200px; margin: 10px 10px 10px 10px; float: left;">
                              <div class="panel-heading" style="width:100%">
                                <h3 class="panel-title">Help to interpret the results</h3>
                              </div>
                              <p style="margin: 10px 10px 10px 10px; line-height: 180%">One table is generated:
                                <br> <b>Pfam</b> table: it contains the list of Pfam domains shared among the selected genomes.Pfam entry, its description, its frequency in the selected genomes and in all genomes is reported. 
                              </p>
                            </div>

                            <ul style="list-style-type:square">
                                <div style="padding-top:10px">
   
                                   <table class="table" style="width:600px;">
                                       <tr>
                                           <th>Number of included genomes</th>
                                           <td> {{  sum_include_length  }} </td>
                                       </tr>
   
                                       <tr>
                                           <th>Number of excluded genomes</th>
                                           <td> {{  sum_exclude_length }} </td>
                                       </tr>
   
                                        <tr>
                                           <th>Number of accepted missing data</th>
                                           <td> {{ n_missing }} </td>
                                       </tr>
                                         <tr>
                                           <th>Number of  PFAM domains identified</th>
                                           <td> {{ sum_group }}  </td>
                                       </tr>
    
                                   </table>

                        <div class="col-lg-12">
                            <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                              <br>
                              <li class="active"><a href="#red" data-toggle="tab">Pfam</a></li>
                        </ul>
                

                        <div id="my-tab-content" class="tab-content" style="margin-top: 2em;">

                            <div class="tab-pane active" id="red">
                                <table class="display" id="PFAM_table">
                                    <thead>
                                        <tr>
                                        <th></th>
                                        <th id="entete_locus">Pfam entry</th>
                                        <th>Description</th>
                                            <th>Count (/{{n_genomes}})</th>
                                            <th>Count all (/{{max_n}})</th>
                                        </tr>
                                    </thead>

									<tbody>
										{% for value in match_groups_data %}
											<tr>
												<td>{{value.0}}</td>
												<td><a href="{% url 'fam_pfam' value.1 %}">{{value.1}}</a></td>
												<td>{{value.2}}</td>
												<td>{{value.3}}</td>
												<td>{{value.4}}</td>

											</tr>
										{% endfor %}
									</tbody>
                                </table>
                            </div>
                        </div>

                    {% endif %}
                </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<script type="text/javascript" id="js2">

$(document).ready(function() {
	$('#PFAM_table').DataTable( {
		dom: 'Bfrtip',
		"paging": true,
		"ordering": true,
		"info": false,
		buttons: [ 
			{
				extend: 'excel',
				title: 'PFAM_table'
			},
			{
				extend: 'csv',
				title: 'PFAM_table'
			}
		],
	} );
} );

$(document).ready(function() {
	$("#PFAM_table").DataTable();}
);

</script>
</body>
{% include "chlamdb/style_menu.html" %}
{% include "chlamdb/show_hide_plasmid_accessions.html" %}
<style>

#div_id_checkbox_single_copy{
  display: none;
}
</html>
