{% extends base.html %}
{% block head %}

<script type="text/javascript" src="{{_server_home}}/_static/js/plan/plan.js?ts={{_ts}}"></script>
<script type="text/javascript" src="{{_server_home}}/_static/lib/webuploader/webuploader.nolog.min.js"></script>
<link rel="stylesheet" href="{{_server_home}}/_static/css/message.css?ts={{_ts}}"/>
<script type="text/javascript" src="{{_server_home}}/_static/js/message/message.js?ts={{_ts}}"></script>

<style>
/**
 * 设置日历的大小
 */
.calendar{
  float: left;
  width: 100%;
  display: block;
}
 
/**
 * 设置日历顶部盒子
 */
.calendar .calendar-title-box{
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align:center;
  /*border-bottom: 1px solid #ddd;*/
  font-weight: bold;
}
 
/**
 * 设置上个月的按钮图标
 */
.calendar .prev-month {
  position: absolute;
  top: 12px;
  left: 0px;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-left: 0px;
  border-top: 6px solid transparent;
  border-right: 8px solid #999;
  border-bottom: 6px solid transparent;
  cursor: pointer;
}

.span-btn {
  background: #9cf;
  border-radius: 3px;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}
.span-btn:hover {
  background-color: #69f;
}

.calendar .prev-month2 {
  float: left;
  cursor: pointer;
  font-weight: lighter;
}

.calendar .next-month2 {
    float: right;
    cursor: pointer;
    font-weight: lighter;
}
 
/**
 * 设置下个月的按钮图标
 */
.calendar .next-month {
  position: absolute;
  top: 0px;
  right: 0px;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-right: 0px;
  border-top: 6px solid transparent;
  border-left: 8px solid #999;
  border-bottom: 6px solid transparent;
  cursor: pointer;
}
 
/* 设置日历表格样式 */
.calendar-table{
  width: 100%;
  border-collapse: collapse;
  text-align:center;
}
 
/* 表格行高 */
.calendar-table tr{
  height: 30px;
  line-height: 30px;
}
 
.calendar-table tr td {
  width: 14.2%;
  padding: 0px;
}

/* 当前天 颜色特殊显示 */
.currentDay {
  color: #fff;
  background-color: #00C1DE
}
 
/* 本月 文字颜色 */
.currentMonth {
  /*color: #999;*/
}

.selected {
  background-color: green;
  color: #fff;
}

td.currentMonth:hover {
  /*border: 3px solid #6C9;*/
  cursor: pointer;
  background-color: #9c9;
  color: #fff;
}
 
/* 其他月颜色 */
.otherMonth{
  color: #ede;
}

.date-info, .date-number {
  padding: 0px;
  font-size: 12px;
  height: 1.4rem;
}

.date-prefix {
  padding-right: 5px;
}

.event-feed {
  margin-top: 5px;
  margin-bottom: 5px;
}

.new-event {
  margin-top: 10px;
}

</style>
{% end %}

{% block body %}

<div class="card">
  {% include common/title/base_title.html %}
</div>

{% include common/date/month_picker.html %}

<div class="card">
  {% render toolbar_tab %}
</div>

{% init show_calendar = True %}

{% if show_calendar %}
<div class="card">
  <div id="calendar" class="calendar">
      <table class="calendar-table">
        <tr>
          {% for head in calendar_heads %}
            <th>{{head.date_info}}</th>
          {% end %}
        </tr>
        {% for row in calendar_rows %}
          <tr>
            {% for cell in row %}
              <td class="{{cell.css_class}}">
                <div class="date-number">{{cell.date_number}}</div>
                <div class="date-info">{{cell.date_info}}</div>
              </td>
            {% end %}
          </tr>
        {% end %}
      </table>
  </div>
</div>
{% end %}

{% include plan/page/month_plan_stared.html %}

<div class="card">
  {% render events_tab %}
</div>

{% include message/page/message_list_content.html %}

<script type="text/javascript">
  PlanView.state.id = "{{plan_record._id}}";

  $(".currentMonth").click(function() {
    $(".currentMonth").removeClass("selected");
    $(this).addClass("selected");
  });

  xnote.on("date.month.selected", function (event) {
    console.log("month selected", event);
    var date = event.target;
    var tab = xnote.getUrlParam("tab", "");
    window.location.href = "?date=" + date + "&tab=" + tab;
  });
</script>


{% if tab == "note_create" %}
<div id="create-list" class="card">
    {% set-global files = created_notes %}
    {% include note/component/note_list_no_card.html %}
</div>
{% end %}

{% if tab == "note_update"%}
<div id="update-list" class="card">
    {% set-global files = updated_notes %}
    {% include note/component/note_list_no_card.html %}
</div>
{% end %}

{% if tab == "message" %}
<script>
  MessageState.messageTag = "log";
  refreshMessageList("{{date_str}}");
</script>
{% end %}

{% end %}

{% block body_right %}
  {% include common/sidebar/default.html %}
{% end %}