{% extends 'tasks/base.html' %}

{% block main_content %}

    <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-xl">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0"> 部门工作事项 <small></small></h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{% url 'tasks:index' %}">主页</a></li>
              <li class="breadcrumb-item active">工作包</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <div class="content">
      <div class="container-xl">
        <div class="row">
{#        col-lg-6 #}
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title" style="margin: auto" >{{ date }}</h3>

                <div class="card-tools">
                  <ul class="pagination float-right">
                    {% load taskfilter %}
                    <li class="page-item"><a class="page-link" href="/group_todolist/{{ date|last_month }}">«</a></li>
                    <li class="page-item"><a class="page-link"> {{ date|this_month }}月 </a></li>
                    <li class="page-item"><a class="page-link" href="/group_todolist/{{ date|next_month }}">»</a></li>
                  </ul>
                </div>
              </div>
{#                <div class="card-header">#}
{#                  <h3 class="card-title">我的任务</h3>#}
{#                </div>#}
                <!-- /.card-header -->
                <div class="card-body p-0">
{#                  <div class="btn-group">#}
{#                    <button type="button" class="btn btn-default">1</button>#}
{#                    <div class="btn-group">#}
{#                          <button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">#}
{#                          </button>#}
{#                          <div class="dropdown-menu" style="">#}
{#                            <a class="dropdown-item" href="#">Dropdown link</a>#}
{#                            <a class="dropdown-item" href="#">Dropdown link</a>#}
{#                          </div>#}
{#                    </div>#}
{#                  </div>#}
                  <table class="table" style="word-break: break-all">
                    <thead>
                      <tr>
                        <th style="width: 16px; text-align:center; vertical-align: middle;">序号</th>
                        <th style="width: 280px; text-align:center; vertical-align: middle;">工作事项</th>
                        <th style="width: 100px; text-align:center; vertical-align: middle;">完成时间</th>
                        <th style="width: 160px; text-align:center; vertical-align: middle;">工作要求及交付物</th>
                        <th style="width: 60px; text-align:center; vertical-align: middle;">任务编号</th>
                        <th style="width: 120px; text-align:center; vertical-align: middle;">任务来源</th>
                        <th style="width: 120px; text-align:center; vertical-align: middle;">承办单位</th>
                        <th style="width: 120px;text-align:center; vertical-align: middle;">承/督办人</th>
                        <th style="width: 200px;text-align:center; vertical-align: middle;">协办人</th>
                        <th style="width: 80px; text-align:center; vertical-align: middle;">工作量(pre)</th>
                        <th style="width: 60px; text-align:center; vertical-align: middle;">折算系数</th>
                        <th style="width: 80px; text-align:center; vertical-align: middle;">工作量</th>
                        <th style="width: 100px; text-align:center; vertical-align: middle;">成熟度</th>
                        <th style="width: 220px; text-align:center; vertical-align: middle;">完成情况</th>
                        <th style="width: 120px; text-align:center; vertical-align: middle;">完成质量</th>
{#                        <th style="width: 40px">Label</th>#}
                      </tr>
                    </thead>
                    <tbody>
                      {% for todo in group_todo %}
                      <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ todo.todo_topic }}</td>
                        <td style="text-align: center">{{ todo.deadline | date:"m月d日" }}</td>
                        <td style="width: 160px"><textarea style="width:100%;overflow:hidden">{{ todo.todo_note }}</textarea></td>
                        <td style="text-align: center">{{ todo.task_id }}</td>
                        <td style="text-align: center">{{ todo.task_origin }}</td>
                        <td style="text-align: center">{{ todo.duty_group }}</td>
                        <td style="text-align: center">{{ todo.main_executor}}</td>
                        <td style="text-align: center">{{ todo.sub_executor.all|join:", " }}</td>
                        <td style="text-align:center;">{{ todo.predict_work }}</td>
                        <td style="text-align:center;">{{ todo.evaluate_factor }}</td>
                        <td style="text-align:center;">{{ todo.real_work|default:'' }}</td>
                        <td >
                          <div class="progress progress-xs">
                            <div class="progress-bar progress-bar-danger" style="width: {{ todo.maturity }}"></div>
                          </div>
                          <span class="badge bg-gradient-blue">{{ todo.maturity }}</span>
                        </td>
                        <td style="text-align: center"><textarea style="overflow:hidden;width:100%;">{{ todo.complete_note }}</textarea></td>
                        <td style="text-align: center">{{ todo.quality_mark|default:'' }}</td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                <!-- /.card-body -->
              </div>
          </div>
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
{% endblock %}