{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block title %}{{ title }} | YanLeafAdmin{% endblock %}
{% block meta_description %}YanLeafAdmin 数据库 ER 图生成器 — 自动读取 Django 模型或解析 SQL DDL 生成实体关系图，支持导出 PNG、Word 三线表{% endblock %}
{% block og_title %}YanLeafAdmin — 数据库 ER 图生成器{% endblock %}
{% block og_description %}自动读取 Django 模型或粘贴 SQL DDL，一键生成实体关系图，支持中英文切换、表选择、PNG/Word 导出{% endblock %}

{% block extrastyle %}
{{ block.super }}
<style>
    .erd-wrap { display: flex; flex-direction: column; height: calc(100vh - 170px); min-height: 500px; gap: 10px; }

    .erd-toolbar {
        display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        padding: 10px 16px; background: var(--yla-bg-card); border: 1px solid var(--yla-border);
        border-radius: 12px; flex-shrink: 0;
    }
    .erd-toolbar .button { font-size: 0.8rem; }
    .erd-tabs { display: flex; gap: 4px; margin-right: auto; }
    .erd-tab {
        padding: 6px 16px; border-radius: 6px; border: 1px solid var(--yla-border);
        background: transparent; cursor: pointer; font-size: 0.8rem; font-weight: 500;
        color: var(--yla-text-secondary); transition: all 0.15s;
    }
    .erd-tab.active { background: #485fc7; color: #fff; border-color: #485fc7; }
    .erd-tab:hover:not(.active) { border-color: #485fc7; color: #485fc7; }

    .erd-selector {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        padding: 8px 14px; background: var(--yla-bg-card); border: 1px solid var(--yla-border);
        border-radius: 8px; font-size: 0.78rem; flex-shrink: 0;
    }
    .erd-check-grid { display: flex; flex-wrap: wrap; gap: 3px 12px; max-height: 80px; overflow-y: auto; }
    .erd-check-grid label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; font-size:0.75rem; }
    .erd-check-grid label input { margin: 0; cursor: pointer; accent-color: #485fc7; }
    .erd-check-grid label.hidden-by-search { display: none; }

    .erd-panel { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 8px; }
    .erd-panel.active { display: flex; }

    .erd-diagram-box {
        flex: 1; min-height: 400px;
        background: #fff; border: 1px solid var(--yla-border); border-radius: 12px;
        overflow: hidden; position: relative;
    }
    .erd-diagram-box::after {
        content: 'YanLeafAdmin  •  github.com/zhouyanye';
        position: absolute; bottom: 6px; right: 10px;
        font: italic 10px sans-serif; color: #bbb;
        pointer-events: none; z-index: 10;
    }
    .theme-dark .erd-diagram-box::after { color: #555; }

    .erd-sql-wrap { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
    .erd-sql-wrap textarea {
        flex: 0 0 200px; min-height: 140px; border: 1px solid var(--yla-border); border-radius: 12px;
        padding: 14px; font-family: 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
        font-size: 0.85rem; resize: vertical; background: var(--yla-bg-input); color: var(--yla-text-primary);
    }
    .erd-sql-wrap textarea:focus { outline: none; border-color: #485fc7; }

    .erd-error {
        display: none; padding: 10px 14px; border-radius: 8px;
        background: #fff5f5; border: 1px solid #fecaca; color: #b91c1c; font-size: 0.8rem;
    }
    .erd-error.visible { display: block; }

    .erd-legend { display: flex; gap: 16px; font-size: 0.75rem; color: var(--yla-text-muted); align-items: center; }
    .erd-legend .pk-mark { color: #b8860b; font-weight: bold; }
    .erd-legend .fk-mark { color: #5bc0de; font-weight: bold; }

    /* Dark mode */
    .theme-dark .erd-toolbar,
    .theme-dark .erd-selector { background: #1e1e2e; border-color: #333; }
    .theme-dark .erd-tab { border-color: #444; color: #bbb; }
    .theme-dark .erd-diagram-box { background: #1e1e2e; border-color: #333; }
    .theme-dark .erd-sql-wrap textarea { background: #1a1a2e; color: #ddd; border-color: #333; }
    .theme-dark .erd-error { background: #2d1b1b; border-color: #7f1d1d; color: #fca5a5; }
</style>
{% endblock %}

{% block content %}
<div class="erd-wrap">

    <div class="erd-toolbar">
        <div class="erd-tabs">
            <button class="erd-tab active" data-tab="models">{% translate 'Django 模型' %}</button>
            <button class="erd-tab" data-tab="sql">{% translate 'SQL DDL' %}</button>
        </div>
        <button class="button is-small" id="erdRefresh" title="{% translate '重新加载' %}">
            <i class="fas fa-sync-alt"></i> {% translate '刷新' %}
        </button>
        <div class="dropdown is-right" id="erdExportDropdown">
            <div class="dropdown-trigger">
                <button class="button is-small" title="{% translate '导出' %}">
                    <i class="fas fa-download"></i> {% translate '导出' %} <i class="fas fa-angle-down"></i>
                </button>
            </div>
            <div class="dropdown-menu">
                <div class="dropdown-content">
                    <a href="#" class="dropdown-item" id="erdExportPNG"><i class="fas fa-image"></i> {% translate '导出 PNG' %}</a>
                    <a href="#" class="dropdown-item" id="erdExportWord"><i class="fas fa-table"></i> {% translate '导出 Word 三线表' %}</a>
                </div>
            </div>
        </div>
        <button class="button is-small" id="erdLangToggle" title="{% translate '中/En' %}" style="width:auto;">
            <span id="erdLangText">中</span>
        </button>
        <button class="button is-small" id="erdFullscreen" title="{% translate '全屏' %}">
            <i class="fas fa-expand"></i>
        </button>
    </div>

    <!-- Django Models panel -->
    <div class="erd-panel active" id="panel-models">
        <div class="erd-selector">
            <span style="font-weight:600;color:var(--yla-text-muted);">{% translate '选择表' %}:</span>
            <input type="text" id="tableSearch" placeholder="{% translate '搜索表名...' %}" style="width:140px;padding:3px 8px;border:1px solid var(--yla-border);border-radius:4px;font-size:0.75rem;">
            <a href="#" id="selToggle" class="is-size-7">{% translate '全选' %}</a>
            <span id="tableChecks" class="erd-check-grid"></span>
        </div>
        <div class="erd-error" id="erdError"></div>
        <div class="erd-diagram-box" id="gojsContainer"></div>
    </div>

    <!-- SQL DDL panel -->
    <div class="erd-panel" id="panel-sql">
        <div class="erd-sql-wrap">
            <textarea id="sqlInput" placeholder="{% translate '粘贴 SQL CREATE TABLE 语句...' %}" spellcheck="false"></textarea>
            <div class="erd-error" id="sqlError"></div>
            <div style="text-align:right;">
                <button class="button is-dark is-small" id="sqlParseBtn">
                    <i class="fas fa-project-diagram"></i> {% translate '生成 ER 图' %}
                </button>
            </div>
            <div class="erd-diagram-box" id="sqlGojsContainer">
                <div class="has-text-centered has-text-grey py-6">{% translate '粘贴 SQL 后点击生成' %}</div>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script src="{% static 'yanleafadmin/vendor/gojs/go.js' %}"></script>
<script>window.GoJS = window.go;</script>
<script src="{% static 'erd/er-diagram.js' %}"></script>
{% endblock %}