{% extends 'base.html' %}

{% load static tags %}

{% block content %}
<div class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ breadcrumb ] start -->
                        <div class="page-header">
                            <div class="page-block">
                                <div class="row align-items-center">
                                    <div class="col-md-12">
                                        <div class="page-header-title">
                                            <h5 class="m-b-10">个人中心</h5>
                                        </div>
                                        <ul class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="index.html"><i
                                                        class="feather icon-home"></i></a></li>
                                            <li class="breadcrumb-item"><a href="#!">个人中心</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- [ breadcrumb ] end -->

                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="card widget-profile">
                                    <div class="card-body text-center">
                                        <h3>{{ name }}</h3>
                                        <p>{{ postion }}</p>
                                        <div class="row mt-5">
                                            <div class="col text-center">
                                                <h4>{{ on_duty_days }}天</h4>
                                                <span>{{ status }}</span>
                                            </div>
                                            <div class="col text-center">
                                                <h4>{{ used_annual_leave }}天</h4>
                                                <span>已用年假</span>
                                            </div>
                                            <div class="col text-center">
                                                <h4>{{ remaining_annual_leave }}天</h4>
                                                <span>剩余年假</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                        <div class="card statustic-card">
                                            <div class="card-header borderless pb-0">
                                                <h5>我的业绩目标</h5>
                                            </div>
                                            <div class="card-body text-center">
                                                <span class="d-block text-c-blue f-36">66.6%</span>
                                                <p class="m-b-0">业绩目标完成率</p>
                                                <div class="progress">
                                                    <div class="progress-bar bg-c-blue" style="width:56%"></div>
                                                </div>
                                            </div>
                                            <div class="card-footer bg-c-blue border-0">
                                                <h6 class="text-white m-b-0">本年已完成项目收入: 666666.66万元</h6>
                                            </div>
                                        </div>
                                    </div>
                            <div class="col-md-4">
                                <div class="card statustic-card">
                                    <div class="card-header borderless pb-0">
                                        <h5>我的项目</h5>
                                    </div>
                                    <div class="card-body text-center">
                                        <span class="d-block text-c-green f-36">5个</span>
                                        <p class="m-b-0">正在进行的项目数量</p>
                                        <div class="progress">
                                            <div class="progress-bar bg-c-green" style="width:85%"></div>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-c-green border-0">
                                        <h6 class="text-white m-b-0">今年已完成的项目数量: 10个</h6>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-4 col-md-6">
                                <div class="card latest-update-card update-card">
                                    <div class="card-header">
                                        <h5>系统通知</h5>
                                    </div>
                                    <div class="new-scroll" style="height:350px;position:relative;">
                                        <div class="card-body">
                                            <div class="latest-update-box">

                                                <div class="row p-t-20 p-b-30">
                                                    <div class="col-auto text-end update-meta">
                                                        <i class="feather icon-bell bg-c-blue update-icon"></i>
                                                    </div>
                                                    <div class="col p-l-5">
                                                        <a href="#!">
                                                            <h6 class="m-0">端午节放假通知</h6>
                                                        </a>
                                                        <p class="m-b-0">2024/06/07 11:40 AM</p>
                                                    </div>
                                                </div>

                                                <div class="row p-b-30">
                                                    <div class="col-auto text-end update-meta">
                                                        <i class="feather icon-bell bg-c-blue update-icon"></i>
                                                    </div>
                                                    <div class="col p-l-5">
                                                        <a href="#!">
                                                            <h6 class="m-0">儿童节活动通知</h6>
                                                        </a>
                                                        <p class="m-b-0">2024/06/01 11:40 AM</p>
                                                    </div>
                                                </div>

                                                <div class="row p-b-30">
                                                    <div class="col-auto text-end update-meta">
                                                        <i class="feather icon-file f-w-600 bg-c-yellow update-icon"></i>
                                                    </div>
                                                    <div class="col p-l-5">
                                                        <a href="#!">
                                                            <h6 class="m-0">更新报销明细</h6>
                                                        </a>
                                                        <p class="m-b-0">2024/05/27 9:00 AM</p>
                                                    </div>
                                                </div>

                                                <div class="row p-b-30">
                                                    <div class="col-auto text-end update-meta">
                                                        <i class="feather icon-file bg-c-yellow update-icon"></i>
                                                    </div>
                                                    <div class="col p-l-5">
                                                        <a href="#!">
                                                            <h6 class="m-0">上传发票通知</h6>
                                                        </a>
                                                        <p class="m-b-0">2024/05/25 9:00 AM</p>
                                                    </div>
                                                </div>

                                                <div class="row p-b-30">
                                                    <div class="col-auto text-end update-meta">
                                                        <i class="feather icon-check-circle f-w-600 bg-c-green update-icon"></i>
                                                    </div>
                                                    <div class="col p-l-5">
                                                        <a href="#!">
                                                            <h6 class="m-0">外贸出口项目完成</h6>
                                                        </a>
                                                        <p class="m-b-0">2024/4/28 9:00 AM</p>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-auto text-end update-meta">
                                                        <i class="feather icon-alert-triangle f-w-600 bg-c-red update-icon"></i>
                                                    </div>
                                                    <div class="col p-l-5">
                                                        <a href="#!">
                                                            <h6 class="m-0">库存不足提醒</h6>
                                                        </a>
                                                        <p class="m-b-0">2024/4/28 9:00 AM</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-8 col-md-6">
                                <div class="card user-list table-card">
                                    <div class="card-header">
                                        <h5>项目协作动态</h5>
                                    </div>
                                    <div class="card-body pb-0">
                                        <div class="table-responsive">
                                            <div class="user-scroll ps ps--active-y" style="height:430px;position:relative;">
                                                <table class="table table-hover m-0">
                                                    <thead>
                                                        <tr>
                                                            <th>姓名</th>
                                                            <th>操作/项目</th>
                                                            <th>时间</th>
                                                    </tr></thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>张三</td>
                                                            <td>
                                                                <h6 class="mb-1"><span class="text-c-green">新增项目</span>： 老挝贸易项目</h6>
                                                            </td>
                                                            <td>2024/06/01 11:40 AM</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            <div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; height: 430px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 351px;"></div></div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}