{% extends "layouts/base.html" %}

{% block title %}Dictionary · HanziLearn{% endblock %}

{% block extra_css %}
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" />
{% endblock %}

{% block content %}

<!-- PAGE HEADER -->
<div class="page-header">
  <div class="container">
    <h1 class="page-title"><i class="bi bi-book me-2"></i>Chinese Dictionary</h1>
    <p class="page-subtitle text-muted">Search Hanzi &middot; Pinyin &middot; English &middot; Vietnamese</p>
  </div>
</div>

<div class="container py-5">

  <!-- Search bar -->
  <div class="dict-search-wrap mb-5">
    <div class="dict-search-box">
      <i class="bi bi-search dict-search-icon"></i>
      <input
        type="text"
        id="dictSearch"
        class="dict-search-input"
        placeholder="Search… 你好 / nǐ hǎo / hello / xin chào"
        autocomplete="off"
        spellcheck="false"
      />
      <button class="dict-search-clear d-none" id="clearBtn" type="button" aria-label="Clear search">
        <i class="bi bi-x-lg"></i>
      </button>
    </div>
    <div class="dict-search-hint" id="searchHint">
      Type at least 1 character to search
    </div>
  </div>

  <!-- Results area -->
  <div id="resultsWrap">

    <!-- Skeleton loader -->
    <div id="skeletonWrap" class="d-none">
      <div class="dict-grid">
        {% for i in range(6) %}
        <div class="dict-card skeleton-card">
          <div class="skeleton-hanzi skeleton"></div>
          <div class="flex-grow-1">
            <div class="skeleton skeleton-line w-25 mb-2"></div>
            <div class="skeleton skeleton-line w-50"></div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Actual results -->
    <div id="resultsList" class="dict-grid d-none"></div>

    <!-- Empty state -->
    <div id="emptyState" class="d-none text-center py-5">
      <div class="empty-hanzi">？</div>
      <h5 class="mt-3">No results found</h5>
      <p class="text-muted">Try a different keyword or check spelling</p>
    </div>

    <!-- Initial state -->
    <div id="initialState" class="text-center py-5">
      <div class="empty-hanzi" style="opacity:.25">词</div>
      <p class="text-muted mt-3">Start typing to search the dictionary</p>
    </div>

  </div>
</div>

<!-- Word Detail Modal -->
<div class="modal fade" id="wordModal" tabindex="-1"
     aria-labelledby="wordModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0">
      <div class="modal-header border-0 pb-0">
        <h6 class="modal-title visually-hidden" id="wordModalLabel">Word Detail</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center px-4 pb-4" id="wordModalBody">
        <!-- Populated by dictionary.js -->
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/dictionary.js') }}"></script>
{% endblock %}