{% extends "erp_base.html" %}

{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260625a" />
<!-- FullCalendar (달력) · vis-timeline (타임라인) — 스켈레톤 단계는 CDN, 추후 self-host -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vis-timeline@7.7.3/styles/vis-timeline-graph2d.min.css" rel="stylesheet" />
{% endblock %}

{% block content %}
<div class="pj-wrap pj-project-view"
     data-project-id="{{ project.id }}"
     data-can-manage="{{ 'true' if can_manage else 'false' }}"
     data-is-admin="{{ 'true' if is_admin else 'false' }}"
     data-me="{{ user.email }}">

  <div class="pj-layout">
    <!-- ── 좌측: 서브프로젝트 + 멤버 ── -->
    <aside class="pj-side">
      <div class="pj-side-block">
        <div class="pj-side-head">
          <span>서브프로젝트</span>
          {% if can_manage %}
          <button type="button" class="pj-icon-btn" id="pj-new-sub" title="서브프로젝트 추가">+</button>
          {% endif %}
        </div>
        <ul class="pj-sub-list" id="pj-sub-list">
          {% for s in subprojects %}
          <li>
            <a href="/project/p/{{ s.id }}">
              <span class="pj-sub-dot" style="background: {{ s.color }}"></span>{{ s.name }}
            </a>
            {% if can_manage %}
            <button type="button" class="pj-icon-btn pj-del-sub" data-id="{{ s.id }}" title="삭제">×</button>
            {% endif %}
          </li>
          {% else %}
          <li class="pj-empty-sm">없음</li>
          {% endfor %}
        </ul>
      </div>

      <div class="pj-side-block">
        <div class="pj-side-head">
          <span>멤버</span>
          {% if is_admin %}
          <button type="button" class="pj-icon-btn" id="pj-add-member" title="멤버 배정">+</button>
          {% endif %}
        </div>
        <ul class="pj-member-list" id="pj-member-list">
          {% for m in members %}
          <li>
            <span class="pj-avatar">{{ (m.user_name or m.user_email)[0] | upper }}</span>
            <span class="pj-member-name">{{ m.user_name or m.user_email }}</span>
            {% if m.role == 'manager' %}<span class="pj-chip pj-chip-sm">관리</span>{% endif %}
            {% if is_admin %}
            <button type="button" class="pj-icon-btn pj-del-member" data-email="{{ m.user_email }}" title="제외">×</button>
            {% endif %}
          </li>
          {% else %}
          <li class="pj-empty-sm">없음</li>
          {% endfor %}
        </ul>
      </div>
    </aside>

    <!-- ── 우측: 뷰 ── -->
    <section class="pj-main">
      <div class="pj-toolbar">
        <div class="pj-view-tabs" id="pj-view-tabs">
          <button type="button" class="pj-tab is-active" data-view="calendar">달력</button>
          <button type="button" class="pj-tab" data-view="timeline">타임라인</button>
          <button type="button" class="pj-tab" data-view="board">보드</button>
          <button type="button" class="pj-tab" data-view="list">리스트</button>
        </div>
        {% if can_manage %}
        <button type="button" class="pj-btn pj-btn-primary" id="pj-new-task">+ 업무 추가</button>
        {% endif %}
      </div>

      <!-- 달력 -->
      <div class="pj-view" data-view="calendar">
        <div id="pj-calendar"></div>
      </div>
      <!-- 타임라인 -->
      <div class="pj-view" data-view="timeline" hidden>
        <div id="pj-timeline"></div>
      </div>
      <!-- 보드(칸반) -->
      <div class="pj-view" data-view="board" hidden>
        <div class="pj-board" id="pj-board"></div>
      </div>
      <!-- 리스트 -->
      <div class="pj-view" data-view="list" hidden>
        <table class="pj-table" id="pj-list">
          <thead>
            <tr><th>업무</th><th>담당자</th><th>단계</th><th>우선순위</th><th>시작</th><th>마감</th></tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </section>
  </div>
</div>

<!-- 업무 모달 -->
<div class="pj-modal" id="pj-modal-task" hidden>
  <div class="pj-modal-card">
    <h3 id="pj-task-modal-title">새 업무</h3>
    <input type="hidden" id="pj-t-id" />
    <label>제목<input type="text" id="pj-t-title" placeholder="업무 제목" /></label>
    <label>설명<textarea id="pj-t-desc" rows="2"></textarea></label>
    <div class="pj-form-row">
      <label>담당자
        <select id="pj-t-assignee">
          <option value="">(미지정)</option>
          {% for m in members %}
          <option value="{{ m.user_email }}" data-name="{{ m.user_name or m.user_email }}">
            {{ m.user_name or m.user_email }}
          </option>
          {% endfor %}
        </select>
      </label>
      <label>단계
        <select id="pj-t-stage">
          {% for s in stages %}
          <option value="{{ s.id }}">{{ s.name }}</option>
          {% endfor %}
        </select>
      </label>
    </div>
    <div class="pj-form-row">
      <label>우선순위
        <select id="pj-t-priority">
          <option value="low">낮음</option>
          <option value="normal" selected>보통</option>
          <option value="high">높음</option>
        </select>
      </label>
      <label>시작일<input type="date" id="pj-t-start" /></label>
      <label>마감일<input type="date" id="pj-t-due" /></label>
    </div>
    <div class="pj-modal-actions">
      <button type="button" class="pj-btn pj-btn-danger" id="pj-delete-task" hidden>삭제</button>
      <span style="flex:1"></span>
      <button type="button" class="pj-btn" data-close>취소</button>
      <button type="button" class="pj-btn pj-btn-primary" id="pj-save-task">저장</button>
    </div>
  </div>
</div>

<!-- 데이터 -->
<script id="pj-data" type="application/json">
{
  "project": {{ project | tojson }},
  "stages": {{ stages | tojson }},
  "tasks": {{ tasks | tojson }},
  "members": {{ members | tojson }},
  "priorityLabels": {{ priority_labels | tojson }}
}
</script>

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vis-timeline@7.7.3/standalone/umd/vis-timeline-graph2d.min.js"></script>
<script src="/static/project.js?v=20260625a" defer></script>
{% endblock %}