{% extends "firebase/firebase_layout.html" %}
<title>{% block title %}FB User Index{% endblock %}</title>
{% 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;
    }

  
    .mobile-responsive tr:hover:not(:first-child) {
        background-color: #d8e7f3;
    }

    @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 tr:hover:not(:first-child) {
            background-color: #d8e7f3;
        }

        .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-th);
            float: left;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 14px;
        }

        .sidebar {
            width: 100%;
            height: auto;
            position: relative;
        }
        .sidebar a {
            float: left;
        }

        .sidebar a {
            text-align: center;
            float: none;
        }
    }

</style>

{% endblock %} {% block content %}
<h4 style="text-align: center;">{{get_conf.conf_name}} - Firebase Token Registered Users</h4>

  <div class="mobile-responsive">
  <table class="table table-striped table-bordered" id="myTable"  style="font-size:12px;width: 100%;">
    <thead >
        <tr style="background-color: #01033f;color:#fff">
        <th width="5%">S.no</th>
        <th width="10%">Full Name</th>
        <th width="15%">Email</th>
        <th width="10%">Mobile</th>
        <th width="25%">FCM Token</th>
        <th width="10%">Registered At</th>
        <th width="10%">View notification</th>
      </tr>
  </thead>
    <tbody>
        {% if fb_index_data %} {% for fb in fb_index_data %}
            <tr>
                <td data-th="S No">
                    {{loop.index}}
                </td>
                <td data-th="Full Name">
                    {% if fb.full_name %} {{fb.full_name or '-'}} {% else %}
                    <label> -</label>
                    {% endif %}
                </td>
                <td data-th="Email">
                    {% if fb.email %} {{fb.email or '-'}} {% else %}
                    <label> - </label>
                    {% endif %}
                </td>
                <td data-th="Mobile">
                    {% if fb.mobile %} {{fb.mobile }} {% else %} 
                    <label> - </label>
                    {% endif %}
                </td>
                <td data-th="FCM Token">
                    {% if fb.fcm_token %} {{ fb.fcm_token | truncate(30) }} {% else %}
                    <label> </label>
                    {% endif %}
                </td>
                <td data-th="Created At">
                    {% if fb.created_at %} {{fb.created_at }} {% else %}
                    <label> </label>
                    {% endif %}
                </td>
                <td data-th="View logs" style="text-align: left;">
                    <a href="{{url_for('firebase.FBUsersNotificationIndex',conf_id = conf_id,conf_key=conf_key,fb_user_id=fb.fb_user_id)}}" title="View notification" class="btn btn-link" target="_blank"> <i class="fa-solid fa-1x fa-bell" style="color:#c30707;"></i></a>
                </td>
            </tr>
            {% endfor %} {% else %}
            <tr>
                <td colspan="9" class="text-center">No record found.</td>
            </tr>
            {% endif %}
        </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 %}