{% extends "erp_base.html" %}

{% block content %}
<section class="erp-home">

  <div class="erp-hero">
    <h2 class="erp-hero-title">안녕하세요, {{ user.name }}님</h2>
    <p class="erp-hero-sub" id="erp-hero-sub"></p>
  </div>

  <div class="erp-home-grid">

    <article class="erp-tile">
      <div class="erp-tile-head">
        <span class="erp-tile-label">바로가기</span>
        <span class="erp-badge erp-badge-neutral">개인업무</span>
      </div>
      <h3 class="erp-tile-title">개인경비</h3>
      <p class="erp-tile-desc">법인카드/개인지출 등록과 정산 신청.</p>
      <a class="erp-btn erp-btn-primary" href="/expense/">개인경비 열기</a>
    </article>

    <article class="erp-tile">
      <div class="erp-tile-head">
        <span class="erp-tile-label">바로가기</span>
        <span class="erp-badge erp-badge-outline">준비중</span>
      </div>
      <h3 class="erp-tile-title">휴가</h3>
      <p class="erp-tile-desc">연차/반차 신청과 잔여일수 확인.</p>
      <button class="erp-btn erp-btn-outline" disabled>오픈 예정</button>
    </article>

    <article class="erp-tile">
      <div class="erp-tile-head">
        <span class="erp-tile-label">알림</span>
        <span class="erp-badge erp-badge-outline">공지</span>
      </div>
      <h3 class="erp-tile-title">시스템 안내</h3>
      <ul class="erp-tile-list">
        <li>좌측 메뉴에서 사용 가능한 업무 모듈을 확인하세요.</li>
        <li>외부 모듈(주문/CORM)은 새 창에서 열립니다.</li>
        <li>권한이 필요한 모듈은 관리자에게 요청하세요.</li>
      </ul>
    </article>

  </div>
</section>

<script>
  (function() {
    const d = new Date();
    const h = d.getHours();
    let greet = "오늘도 좋은 하루 되세요.";
    if (h < 5)        greet = "늦은 시간까지 수고 많으세요.";
    else if (h < 12)  greet = "활기찬 아침입니다.";
    else if (h < 18)  greet = "오후 업무 화이팅입니다.";
    else              greet = "오늘도 고생 많으셨습니다.";
    const days = ["일","월","화","수","목","금","토"];
    const dateStr = `${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,"0")}.${String(d.getDate()).padStart(2,"0")} (${days[d.getDay()]})`;
    const el = document.getElementById("erp-hero-sub");
    if (el) el.textContent = `${dateStr} · ${greet}`;
  })();
</script>
{% endblock %}