{% extends 'admin/base.html' %}
{% block content %}


<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
        width: 100%;
        padding-right: 7.5px;
        padding-left: 7.5px;
        margin-right: auto;
        margin-left: auto;
    }
    .tabledata{
        align-items: center;
    }
</style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
    
    <section class="content">
        <div class="container-fluid" style="min-width: 1500px;">

            <div class="row justify-content-center">    
                <div class="col-md-4">
                    <!-- Widget: user widget style 1 -->
                    <div class="card card-widget widget-user">
                        <!-- Add the bg color to the header using any of the bg-* classes -->
                        {% if userData.is_actives == False %}
                        <div class="widget-user-header bg-danger" id="colorpic">
                        {% endif %}
                        {% if userData.is_actives == True %}
                        <div class="widget-user-header bg-success" id="colorpic">
                        {% endif %}
                            <h3 class="widget-user-username">{{userData.username}}.</h3>
                            <h5 class="widget-user-desc">{{userData.email}}</h5>
                        </div>
                        <div class="widget-user-image">
                            <img class="img-circle elevation-2" src="https://dev2.spaceo.in/project/l9_basecode/public/admin_assets/images/user2-160x160.jpg" alt="User Avatar">
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-sm-4 border-right">
                                    <div class="description-block">
                                        <h5 class="description-header">
                                            {% if userData.email_verified == True %}
                                            <span class="badge bg-success" id ="emailVarified">
                                                ✔️
                                            </span>
                                            {% endif %}
                                            {% if userData.email_verified == False %}
                                            <span class="badge bg-danger" id ="emailVarified">
                                                ✕
                                            </span>
                                            {% endif %}
                                        </h5>
                                        <span class="description-text">Email Verified</span>
                                    </div>
                                    <!-- /.description-block -->
                                </div>
                                <!-- /.col -->
                                <div class="col-sm-4 border-right">
                                    <div class="description-block">
                                        <h5 class="description-header">
                                            <!-- <span class="badge bg-danger" id ="emailVarified">
                                                {{userData.is_verified}} -->
                                            <!-- </span> -->
                                            {% if userData.mobile_verified == True %}
                                            <span class="badge bg-success" id ="emailVarified">
                                                ✔️
                                            </span>
                                            {% endif %}
                                            {% if userData.mobile_verified == False %}
                                            <span class="badge bg-danger" id ="emailVarified">
                                                ✕
                                            </span>
                                            {% endif %}
                                            <!-- <span class="badge bg-success"id ="mobileVarified">
                                                {{userData.mobile_verified}}
                                            </span> -->
                                        </h5>
                                        <span class="description-text">Mobile Verified</span>
                                    </div>
                                    <!-- /.description-block -->
                                </div>
                                <!-- /.col -->
                                <div class="col-sm-4">
                                    <div class="description-block">
                                        <h5 class="description-header">{{userData.date_joined}}</h5>
                                        <span class="description-text">Registered On</span>
                                    </div>
                                    <!-- /.description-block -->
                                </div>
                                <!-- /.col -->
                            </div>
                            <!-- /.row -->
                        </div>
                    </div>
                    <!-- /.widget-user -->
                </div>
            </div>
            <div class="row mt-5 justify-content-center">
                <div class="col-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Login Details</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body p-0">
                            <table class="table table-sm">
                                <thead>
                                    <tr align="center" valign="center">
                                        
                                        <th>Device Type</th>
                                        <th>Device Name</th>
                                        <th>Last Used At</th>
                                        <th>Expired At</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody id="tabledata">
                                    {% for list_mobile in diviceData %}
                                      <tr align="center" valign="center">
                                        {% if list_mobile.device_type == "android" %}
                                        <td><i class="fab fa-android"></i></td>
                                        {% endif %}
                                          {% if list_mobile.device_type == "ios" %}
                                          <td><i class="fab fa-apple"></i></td>
                                          {% endif %}

                                          {% if list_mobile.device_type == "web" %}
                                          <td><i class="fab fa-internet-explorer"></i></td>
                                          {% endif %}

                                            <!-- <td>{{ list_mobile.device_type }}</td> -->
                                            <td>{{ list_mobile.device_name }}</td>
                                            <td>{{ list_mobile.updated_at }}</td>
                                            <td>{{list_mobile.expired_at}}</td>
                                            <td>active</td>

                                      </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
                <!-- /.col -->
            </div>
            <div class="row mt-5 justify-content-center">
                <div class="col-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Personal Details</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body p-0">
                            <table class="table table-sm">
                                <tbody>
                                    <tr>
                                        <th>Language</th>
                                        <td>en</td>
                                    </tr>
                                    <tr>
                                        <th>ISD Code</th>
                                        <td>{{userData.isd_code}}</td>
                                    </tr>
                                    <tr>
                                        <th>Mobile</th>
                                        <td>{{userData.mobile}}</td>
                                    </tr>
                                    <tr>
                                        <th>Email Verified At</th>
                                        <td>{{userData.last_name}}</td>
                                    </tr>
                                    <tr>
                                        <th>Mobile Verified At</th>
                                        <td>{{userData.first_name}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
</div>

                <!-- /.content-wrapper -->
         </div>
            </div>





</body>
</html>
    
{% endblock %}  



