{% extends "base_public.html" %}

{% block content %}
<div class="row mt-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">Bem-vindo ao Sistema de Gestão de Férias do Grupo Kuttner</h5>
            </div>
            <div class="card-body">
                <p class="lead">
                    Este sistema foi desenvolvido para facilitar a gestão de férias dos colaboradores de acordo com 
                    a legislação trabalhista brasileira (CLT).
                </p>
                
                <h6 class="mt-4">Principais Funcionalidades:</h6>
                <div class="row mt-3">
                    <div class="col-md-4 text-center mb-4">
                        <div class="icon-box bg-info text-white mb-3 mx-auto">
                            <i data-feather="user"></i>
                        </div>
                        <h5>Para Colaboradores</h5>
                        <ul class="list-unstyled text-start">
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Solicitar férias</li>
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Consultar saldo</li>
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Histórico de férias</li>
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Vender 1/3 das férias</li>
                        </ul>
                    </div>
                    
                    <div class="col-md-4 text-center mb-4">
                        <div class="icon-box bg-success text-white mb-3 mx-auto">
                            <i data-feather="users"></i>
                        </div>
                        <h5>Para Gestores</h5>
                        <ul class="list-unstyled text-start">
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Aprovar solicitações</li>
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Visualizar calendário</li>
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Gerenciar equipe</li>
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Histórico de solicitações</li>
                        </ul>
                    </div>
                    
                    <div class="col-md-4 text-center mb-4">
                        <div class="icon-box bg-danger text-white mb-3 mx-auto">
                            <i data-feather="clipboard"></i>
                        </div>
                        <h5>Para RH</h5>
                        <ul class="list-unstyled text-start">
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Cadastro de colaboradores</li>
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Cadastro de empresas</li>
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Relatórios gerenciais</li>
                            <li><i data-feather="check" class="feather-small text-success me-1"></i> Controle de férias (CLT)</li>
                        </ul>
                    </div>
                </div>
                
                
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">Acesso ao Sistema</h5>
            </div>
            <div class="card-body">
                <p>Para acessar o sistema utilize as credenciais enviadas anteriormente pelo Departamento do TI:</p>
                                             
                <div class="d-grid mt-3">
                    <a href="{% url 'login' %}" class="btn btn-success">
                        <i data-feather="log-in"></i> Fazer Login
                    </a>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header bg-warning">
                <h5 class="mb-0">Requisitos Legais</h5>
            </div>
            <div class="card-body">
                <h6 class="mb-2">Férias segundo a CLT:</h6>
                <ul class="mb-0">
                    <li>Após 12 meses de trabalho, o empregado tem direito a 30 dias de férias</li>
                    <li>Comunicação com 30 dias de antecedência</li>
                    <li>Possibilidade de vender até 1/3 das férias</li>
                    <li>Fracionamento em até 3 períodos</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}