{% extends "base.html" %}
{% load staticfiles %}

{% block title %}项目列表{% endblock %}

{% block staticcss %}


    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" />

    <style>
        .datetimepicker {z-index:9999 !important;}

    </style>

{% endblock %}

{% block staticjs %}

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">


    $(".form_datetime").datetimepicker({
        format: "yyyy-mm-dd",
        minView: 2,
        autoclose: true,
        todayBtn: true,
        pickerPosition: "bottom-left",
        language: 'zh',
        todayHighlight: true
    });

    </script>
{% endblock %}

{% block content %}


<!-- Page Content -->
    <div id="page-wrapper">


        <div class="container-fluid">
            <div class="row">


                    <ol class="breadcrumb">
                        <li><a href="/"><span class="glyphicon glyphicon-home"></span></a></li>
                        <li class="active">子项目管理</li>
                        <li class="active"><a href="javascript:history.go(-1);">返回前页</a></li>
                    </ol>

            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
        {% if messages %}
            <ul class="messages">
                {% for message in messages %}
                <div {% if message.tags %} class="alert alert-{{ message.tags }}" {% endif %}><strong>{{ message }}</strong></div>
                {% endfor %}
            </ul>
        {% endif %}
        <!-- /.row -->

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong>{{ project.name }}</strong>

                        <div class="pull-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-chevron-down"></i>

                                </button>
                                <ul class="dropdown-menu pull-right" role="menu">
                                    <li>
                                        <button  class="btn btn-outline" data-toggle="modal" data-target="#myModal">
                                                添加任务
                                        </button>
                                    </li>

                                </ul>

                            </div>
                        </div>
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <!--表单报错显示-->
                        {% if form.errors %}

                            {% for field, error in form.errors.items %}
                                <div class="alert alert-error">
                                    {{ field }} <code>{{ error }}</code>
                                </div>
                            {% endfor %}


                        {% endif %}
                        <div class="dataTable_wrapper">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                                    <tr>
                                        <th>选择</th>
                                        <th>ID</th>
                                        <th>任务名称</th>
                                        <th>权重</th>
                                        <th>创建人</th>
                                        <th>创建日期</th>
                                        <th>截止日期</th>
                                        <th>分配给</th>
                                        <th>进度</th>
                                        <th>状态</th>
                                        <th>评论</th>
                                        <th>绩效</th>
                                        <th>绩效锁定</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for list in subproject %}
                                    <tr class="odd gradeX {% if list.overdue_status %}danger{% endif %}">
                                        <td><input type="checkbox" value=""></td>
                                        <td>{{ forloop.counter }}</td>
                                        <td><p class="{{ list.title }}"> {{ list.title|slice:'15' }}</p></td>
                                        <td class="{% ifequal list.priority 1 %}danger {% endifequal %}">{{ list.get_priority_display }}</td>
                                        <td>{{ list.created_by }}</td>
                                        <td>{{ list.created_date }}</td>
                                        <td class="center">{{ list.due_date }}</td>
                                        <td class="center">{{ list.assigned_to }}</td>
                                        <td>
                                           <div class="progress">
                                              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                                   aria-valuemax="100" style="width: {{ list.progress }};">
                                                  {{ list.progress }}
                                              </div>
                                            </div>

                                        </td>
                                        <td>{{ list.get_status_display }}</td>
                                        <td><a href="#">{{ list.itemcomment_set.all.count }}</a> </td>
                                        <td>{{ list.per_value }}</td>
                                        <td>
                                            {% if list.lock %}
                                            <i class="fa fa-lock"></i>
                                            {% else %}
                                            <i class="fa fa-unlock"></i>
                                            {% endif %}
                                        </td>
                                        <td>
                                        <a class="btn btn-outline btn-primary" href="{% url 'taskview' list.id %}">查看</a>

                                        <a class="btn btn-outline btn-info" href="{% url 'edittaskitem'  list.id %}">编辑</a>

                                        <a class="btn btn-outline btn-danger" href="#" data-href="{% url 'delitem'%}?type=task&id={{ list.id }}"
                                                data-toggle="modal" data-target="#confirm-delete">删除</a>

                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--end panel-body-->
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">新任务</h4>
                </div>
                <form  role="form" onsubmit="return dosubmit()" method="post">
                        {% csrf_token %}
                <div class="modal-body">

                        {% for hidden in form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}
                        {% for field in form.visible_fields %}

                            <div class="form-group">
                                <label class="control-label">{{ field.label_tag }}</label>
                                <div class="controls">

                                    {{ field.errors }}{{ field }}{{ field.help_text }}
                                </div>
                            </div>
                        {% endfor %}


                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal">重设</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

{% endblock %}
