{% extends 'admin/base.html' %}

{% block title %}{% if tag %}编辑标签{% else %}新建标签{% endif %}{% endblock %}
{% block page_title %}{% if tag %}编辑标签{% else %}新建标签{% endif %}{% endblock %}

{% block content %}
<form method="POST" class="form-card">
    <div class="form-group">
        <label for="name">名称 *</label>
        <input type="text" id="name" name="name" required
               value="{{ tag.name if tag else '' }}">
    </div>
    
    <div class="form-group">
        <label for="color">颜色</label>
        <div class="color-input-wrapper">
            <input type="color" id="color-picker" value="{{ tag.color if tag else '#007bff' }}"
                   style="width: 50px; height: 38px; border: none; cursor: pointer;">
            <input type="text" id="color" name="color" 
                   value="{{ tag.color if tag else '#007bff' }}"
                   pattern="^#[0-9A-Fa-f]{6}$">
        </div>
    </div>
    
    <div class="form-actions">
        <button type="submit" class="btn btn-primary">
            {% if tag %}保存修改{% else %}创建标签{% endif %}
        </button>
        <a href="{{ url_for('admin.tags') }}" class="btn btn-secondary">取消</a>
    </div>
</form>

<script>
const colorPicker = document.getElementById('color-picker');
const colorInput = document.getElementById('color');

colorPicker.addEventListener('input', (e) => {
    colorInput.value = e.target.value;
});

colorInput.addEventListener('input', (e) => {
    if (/^#[0-9A-Fa-f]{6}$/.test(e.target.value)) {
        colorPicker.value = e.target.value;
    }
});
</script>
{% endblock %}