{% extends "conferenceapp/layout.html" %}
{% block style %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />

<style type="text/css">
.dataTable no-footer{
    width:100% !important;
}
  @media screen and (max-width: 600px) {

  .mobile-responsive table {
    border: 0;
    border-collapse: collapse;
  }

 .mobile-responsive table thead {
    display:none;
  }
  .mobile-responsive table th {
    display:none;
  }
  
  
 .mobile-responsive table tr {
    margin-bottom: 20px;
    display: block;
    border-bottom: 2px thin #faf5f5;
    box-shadow: 2px 2px 1px #dadada;
    border-collapse: collapse;

  }

 .mobile-responsive table td {
    display: block;
    text-align: right;
    font-size: 15px;
    border-collapse: collapse;
    padding: 25px;

  }

 .mobile-responsive table td:last-child {
    border-bottom: 0;
  }

 .mobile-responsive table td::before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    
  }

  /* .mobile-responsive tbody{
    line-height:0!important;
  } */
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  /*div.content {margin-left: 0;}*/
  .sidebar a {
    text-align: center;
    float: none;
  }
}
</style>
{% endblock %}
{% block content %}


  <h1 class="text-center mt-2">Conference Index</h1>
   <a class="btn btn-danger float-right " type="button" id="back" href="{{ url_for('confapp.BackToHome')}}">Back</a>
   <br>
    
    
        <div class="mobile-responsive">
            <table class="table  mt-2 " id="myTable" style="width:100% !important;">
                <thead style="background-color: #072645;border-color: #dee2e6;color: #FFF;">
                    <tr>
                        <th>S.no</th>
                        <th>Conf Id</th>
                        <th>Conf Name</th>
                        <th>Society Id</th>
                        <th>Society Name</th>
                        <th>Support Email</th>
                        <th>Backup Email</th>
                        <th>Am Id</th>
                        <th>Coference Start Date</th>
                        <th>Conference End Date</th>
                        <th>Payment Type</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                {% for row in conference_data %} 
                    {% if row.is_conf_completed and row.is_conf_completed == 1 : %}
                    <tr style="background-color: #a5f6a5;">
                        {% else: %}
                    <tr>
                    {% endif %}
                <td data-label="S No">
                    {{loop.index}}
                </td>
                <td data-label="Conf Id:">
                    {% if row.conf_id %}
                         {{row.conf_id }}
                    {% else %}
                         <label> </label>
                    {% endif %}
                </td>
                <td data-label="Conf Name:">
                    {% if row.conf_name %}
                         {{row.conf_name  }}
                    {% else %}
                         <label> </label>
                    {% endif %}
                </td>
                <td data-label="Society Id:">
                    {% if row.society_id %}
                         {{row.society_id  }}
                    {% else %}
                         <label> </label>
                    {% endif %}
                </td>
                <td data-label="Society Name:">
                    {% if row.society_name %}
                         {{row.society_name }}
                    {% else %}
                         <label> </label>
                    {% endif %}
                </td>
                 <td data-label="Support Email:">
                     {% if row.e_support_email %}
                        {{row.e_support_email }}
                    {% else %}
                         <label> </label>
                    {% endif %}    
                </td>
                <td data-label="Backup Email:">
                    {%  if row.e_backup_emails %}
                        {{row.e_backup_emails }}
                    {% else %}
                         <label> </label>
                    {% endif %}    
                </td>
                <td data-label="Am Id:">
                    {% if row.pg_appmaster_id %}
                         {{row.pg_appmaster_id }}
                    {% else %}
                         <label> </label>
                    {% endif %}
                </td>
                <td data-label="Conference Start Date:">
                    {%if row.conf_start_time%} {{row.conf_start_time.strftime('%d-%m-%Y') }} {% else : %}
                    <label> </label>
                    {% endif %}
                </td>
                <td data-label="Conference End Date:">
                    {%if row.conf_end_time%} {{row.conf_end_time.strftime('%d-%m-%Y') }} {% else : %}
                    <label> </label> {% endif %}
                </td>
                <td data-label="payment Type:">
                    {% if row.pg_details %}
                         {{row.pg_details or '-' }}
                    {% else %}
                         <label> </label>
                    {% endif %}
                </td>
                <td data-label= "Action">
                    <a href="{{url_for('confapp.EditConfIndex',conf_id = row.conf_id,conf_key=row.conf_key)}}" title="Edit"><i class="bi bi-pencil-square mr-3" style="color:blue;"></i></a>
                </td>
            </tr>
            {% endfor %}
                    
                    
                    
                       
                        
                </tbody>
            </table>
     </div>


{% endblock %}

{% block bottomscript %}
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
    
     $("#myTable").dataTable( {
        "iDisplayLength": 50
    } );
    // $("#myTable").DataTable();
   
} );
   
</script>

{% endblock %}