{% extends "landing_base.html" %}
{% load static %}
{% load crispy_forms_tags %}


{% block Style %}
 <style>
 .icons{
    font-size: 50px;
 }
 .dashboard-grid:hover .icons{
     font-size: 70px;
 }
 .dashboard-grid {
    padding: 40px;
}
.payroll{
    background-color: #006769;
}
.petty_cash{
    
    background-color: #6B240C;
}

.vat_and_tax{
    background-color: #7469B6;
}
.f_and_b{
    background-color: #627254;
}
.user{
    background-color: #F28585;
}
 </style>
{% endblock Style %}

{% block MainContent %}
<!-- dashboard-grids -->
<div class="row">
    <div class="col-md-12">
        <div class="dashboard-grids bg-white">
            <div class="row">                
                
                {% if request.user.is_superuser == True %}
                <div class="col-md-3">
                    <a href="{% url 'account-user-management'%}">
                     
                        <div class="dashboard-grid user">
                            <div class="icons">
                                <i class="fa fa-users" aria-hidden="true" style="color:#FFA447;"></i>
                            </div>
                            <div class="grid-text">
                                <h4>User and Organization Management</h4>
                            </div>
                        </div>
                    </a>
                </div> 
                <div class="col-md-3">
                    <a href="{% url 'finance_and_banking-dashboard'%}">
                        <div class="dashboard-grid f_and_b">
                            <div class="icons">
                                <i class="fa fa-usd" aria-hidden="true" style="color:#76885B;"></i>
                            </div>
                            <div class="grid-text">            
                                <h4>Finance & Banking</h4>
                            </div>                            
                        </div>
                    </a>
                </div> 
                <div class="col-md-3">
                    <a href="{% url 'payroll-dashboard'%}">
                        <div class="dashboard-grid payroll">
                            <div class="icons">
                                <i class="fa fa-university" aria-hidden="true" style="color:#40A578;"></i>
                            </div>
                            <div class="grid-text">            
                                <h4>Payroll</h4>
                            </div>                            
                        </div>
                    </a>
                </div> 
                <div class="col-md-3">
                    <a href="{% url 'petty-cash-deshboard'%}">

                        
                        <div class="dashboard-grid petty_cash">
                            <div class="icons">
                                <i class="fa fa-money" aria-hidden="true" style="color:#994D1C;"></i>
                            </div>
                            <div class="grid-text">            
                                <h4>Petty Cash</h4>
                            </div>                            
                        </div>
                    </a>
                </div> 
                <div class="col-md-3">
                    <a href="{% url 'vat-and-tax-deshboard'%}">
                        
                        <div class="dashboard-grid vat_and_tax">
                            <div class="icons">
                                <i class="fa fa-google-wallet" aria-hidden="true"  style="color:#AD88C6"></i>
                            </div>
                            <div class="grid-text">            
                                <h4>VAT & Tax</h4>
                            </div>                            
                        </div>
                    </a>
                </div> 
                {% endif %}
                 
              {% for permission in user_permission %}
                
             
                
                {% if permission.module.name == 'f_nd_b' %}
                <div class="col-md-3">
                    <a href="{% url 'finance_and_banking-dashboard'%}">
                        <div class="dashboard-grid f_and_b">
                            <div class="icons">
                                <i class="fa fa-usd" aria-hidden="true" style="color:#76885B;"></i>
                            </div>
                            <div class="grid-text">            
                                <h4>Finance & Banking</h4>
                            </div>                            
                        </div>
                    </a>
                </div> 
                {% elif  permission.module.name == 'payroll' %}
                <div class="col-md-3">
                    <a href="{% url 'payroll-dashboard'%}">
                        <div class="dashboard-grid payroll">
                            <div class="icons">
                                <i class="fa fa-university" aria-hidden="true" style="color:#40A578;"></i>
                            </div>
                            <div class="grid-text">            
                                <h4>Payroll</h4>
                            </div>                            
                        </div>
                    </a>
                </div> 
        
                {% elif  permission.module.name == 'petty_cash' %}
                <div class="col-md-3">
                    <a href="{% url 'petty-cash-deshboard'%}">
                        <div class="dashboard-grid petty_cash">
                            <div class="icons">
                                <i class="fa fa-money" aria-hidden="true" style="color:#994D1C;"></i>
                            </div>
                            <div class="grid-text">            
                                <h4>Petty Cash</h4>
                            </div>                            
                        </div>
                    </a>
                </div> 
        
                {% elif  permission.module.name == 'vat_nd_tax' %}
                <div class="col-md-3">
                    <a href="{% url 'vat-and-tax-deshboard'%}">
                        <div class="dashboard-grid vat_and_tax">
                            <div class="icons">
                                <i class="fa fa-google-wallet" aria-hidden="true" style="color:#AD88C6"></i>
                            </div>
                            <div class="grid-text">            
                                <h4>VAT & Tax</h4>
                            </div>                            
                        </div>
                    </a>
                </div> 
                {% endif %}
                {% endfor %}           
            </div>
        </div>
    </div>
</div>

<!-- current-status -->

<!-- dashboard-grids -->

{% endblock MainContent %}
{% block meassage %}

{% include 'notifications/notifications.html' %}

{% endblock meassage %}


{% block JS %}

{% endblock JS %}