<!DOCTYPE html>
{% load static  %}
{% load resume_filter %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>resume-{{ basic_info.name_cn}}的简历</title>
    <!--
    <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="css/font-awesome.min.css">-->
    <link href="https://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <link rel="icon" class="js-site-favicon" type="image/svg+xml"
          href="https://github.githubassets.com/favicons/favicon.svg">
    <style rel="stylesheet">
        body {
            background: #E9EBEE;
            font-family: -apple-system-font, BlinkMacSystemFont, Microsoft YaHei, Microsoft YaHei UI, Helvetica Neue, PingFang SC, Hiragino Sans GB, Arial, sans-serif;
            /* font-size: .875rem;
             font-size: 14px; */

        }
    </style>
</head>
<body>
{#删除HTML标签之间的空白。这包括制表符和换行符。#}
{% spaceless %}
<div class="container mt-4">
    <div class="shadow bg-white rounded">
        <!--简历头部,基本介绍-->
        <div style="background: #959FA8">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-2 col-md-12  col-sm-12 col-12 text-center container-fluid m-0 p-0">
                        <img class="img-fluid" style="width: 100%; height: 100%; "  src="{{ basic_info.get_images_head_sculpture_base64 }}" />
                    </div>
                    <div class="col-lg-5  col-md-12 col-12 col-sm-12">
                        <div class="row">
                            <div class="col-12 m-auto text-left pt-2">
                                <h3 class="text-white">{{ basic_info.name_cn}}</h3>
                                <h4>
                                    <small>{{ basic_info.expected_position}}</small>
                                </h4>
                                <h5>
                                    <small><span class="icon-envelope-alt m-1"></span><a
                                            href="mailto:{{ basic_info.email }}" class="text-muted">{{ basic_info.email }}</a>
                                    </small>
                                </h5>
                                <h5>
                                    <small><span class="icon-phone m-1"></span>
                                        <a href="tel:{{ basic_info.phone }}" class="text-muted">{{ basic_info.phone}}</a>
                                    </small>
                                </h5>
                                <h5>
                                    <small><span class="icon-github-sign m-1"></span>
                                        <a href="{{ basic_info.href }}" class="text-muted"
                                           target="_blank">{{ basic_info.href|cut:"https://github.com/"|default_if_none:"#" }}</a>
                                    </small>
                                </h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-12 col-sm-12 col-12 text-center m-auto animated rotateInDownRight"><h4
                            class="display-3 text-white">简历</h4></div>
                </div>
            </div>
        </div>
        <!--自我描述-->
        <div class="col-12">
            <h4 class="animated infinite bounce">
                <small class="font-weight-bold">自我描述</small>
            </h4>
            <hr class="w-auto"/>
            <div class="text-muted">
                {{ basic_info.self_desc|safe }}
            </div>
        </div>

        <div class="row m-auto pb-2">
              <!--工作经历-->
            <div class="col-lg-8 col-12">
                <div>
                    <h4>
                        <small class="font-weight-bold">工作经历</small>
                    </h4>
                    <hr class="w-auto">
                    <div>
                        {% for work_experience in work_experiences %}
                        <!--工作担任角色,年限以及公司名称介绍-->
                        <div class="row">
                            <div class="col-12 col-lg-4">
                                <div class="col-12">
                                    <B class="font-weight-bold">{{ work_experience.work_position }}
                                        {% if forloop.first %}
                                        <span class="badge badge-primary">目前</span>
                                        {% endif %}
                                    </B>
                                </div>
                                <div class="col-12 text-muted">
                                    <span>{{ work_experience.gmt_duration_start|date:"Y-m" }}~</span>
                                    {% if work_experience.gmt_duration_end %}
                                        <span>{{ work_experience.gmt_duration_end|date:"Y-m" }}</span>
                                    {% else %}
                                        <span>至今</span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-12 col-lg-8 text-right"><B>{{ work_experience.company|strip }}<span
                                    class="badge badge-primary">#{{ forloop.revcounter }}</span></B></div>
                        </div>
                        <!--工作内容描述-->
                        <div class="col-12 text-muted">
                            {{ work_experience.work_desc|safe|escape }}
                        </div>
                        <!--工作中主要使用到的关键技术-->
                        <div class="col-12">
                            <B>
                                使用到技术:
                            </B>
                            <div>
                                {% for skill in work_experience.used_tech|value_split %}
                                <span class="badge {{ list_bg_color|random }}">{{ skill|capfirst|strip }}</span>
                                {% endfor %}
                            </div>
                        </div>
                        {% if not forloop.last %}
                         <hr class="w-auto">
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            <!--右边显示-->
            <div class="col-lg-4 col-12">
            <!-- 技能区域 -->
                <h4>
                    <small class="font-weight-bold">技能</small>
                </h4>
                <hr class="w-auto"/>
                <div class="col-12">
                    <B>主要技能</B>
                    {% for skill_info in skill_infos %}
                    {% if forloop.counter <= 5 %}
                    <div>{{ skill_info.skill|capfirst|strip }}
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated {{ list_bg_color|random }}"
                                 role="progressbar"
                                 style="width:{{ skill_info.percent }}%" aria-valuenow="50"
                                 aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <!--其它技能区域-->
                    {% elif forloop.counter == 6 %}
                    <B>其它</B>
                    <div>
                        <span class="badge badge-pill {{ list_badge_color|random }} btn-lg">{{ skill_info.skill|strip }}</span>
                        {% elif forloop.last %}
                        <span class="badge badge-pill {{ list_badge_color|random }} btn-lg">{{ skill_info.skill|strip }}</span>
                    </div>
                    {% else %}
                    <span class="badge badge-pill {{ list_badge_color|random }} btn-lg">{{ skill_info.skill|strip }}</span>
                    {% endif%}
                    {% endfor %}
                </div>
                <!--教育区域-->
                <h4 style="margin-top: 5%">
                    <small class="font-weight-bold">教育</small>
                </h4>
                <hr class="w-auto"/>
                <div class="col-12">
                    {% for edu_info in edu_infos %}
                    <B>{{ edu_info.certificate }}<span class="badge badge-primary">{{ forloop.revcounter }}</span></B>
                    <br/>{{ edu_info.edu_unit }}
                    <h6>
                        <small class="text-muted">{{ edu_info.gmt_education_start|date:"Y-m-d" }}~{{ edu_info.gmt_education_end|date:"Y-m-d" }}</small>
                    </h6>
                    <div class="text-muted">{{ edu_info.edu_desc|safe }}</div>
                    {% endfor %}
                </div>
                <!--兴趣爱好部分-->
                <p>
                <h4>
                    <small class="font-weight-bold">兴趣爱好</small>
                </h4>
                <hr class="w-auto"/>
                <div class="col-12 text-muted">
                  {{ basic_info.hobby|safe}}
                </div>
                </p>
            </div>
        </div>
    </div>

</div>
<!--页脚-->
<div class="text-center container card-footer mt-3 mb-2" style="background: #E9EBEE">
    <h6>
        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal" data-whatever="@廖志明">
            留言
        </button>
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form action="call.php" method="get" role="form">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">留言</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group text-left">
                                <label for="recipient-name" class="col-form-label ">您的联系方式:</label>
                                <input name="phone" type="text" class="form-control" id="recipient-name"
                                       placeholder="此处留下您的联系方式...">
                            </div>
                            <div class="form-group text-left">
                                <label for="message-text" class="col-form-label ">您的留言:</label>
                                <textarea name="message" class="form-control" id="message-text"
                                          placeholder="此处留下您想说的...."></textarea>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <div class="col-6 text-right">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            </div>
                            <div class="col-6 text-left">
                                <input type="submit" name="submit" class="form-control btn btn-primary"
                                       value="发送"></input>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
        <div class="spinner-grow text-success spinner-grow-sm" role="status">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-border text-primary spinner-border-sm" role="status">
            <span class="sr-only">Loading...</span>
        </div>
        <B>&bull;</B>{{ basic_info.name_cn }}({{ basic_info.name_en }})&copy;<span id="years_now" class="font-weight-bold"></span>
        <span class="font-weight-bold">All&nbsp;Rights&nbsp;Reserved</span><B>&bull;</B>
        Version:3.0<B>&bull;</B>以上样式由系统自动生成
    </h6>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
    /*赋值授权时间*/
    $(function () {
        const now = new Date();
        const year = now.getFullYear();
        $("#years_now").html(year);
        $('#exampleModal').on('show.bs.modal', function (event) {
            const button = $(event.relatedTarget);
            const recipient = button.data('whatever');
            const modal = $(this);
            modal.find('.modal-title').text('留言给' + recipient);
            <!--modal.find('.modal-body input').val(recipient);-->
        })
    })
</script>
</body>
{% endspaceless %}
</html>