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

{% block title %}
    {% if object %}Edit Custom Parameter{% else %}Add Custom Parameter{% endif %} | ChatLab
{% endblock %}
{% block admin_param_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">{% if object %}Edit Custom Parameter{% else %}Add Custom Parameter{% endif %}</h2>
        <p class="page-subtitle">Add a keyword and its predefined response.</p>
    </div>
    <a href="{% url 'admin_custom_parameter_list' %}" class="btn btn-secondary" style="border-radius: 0;">
        &larr; Back to Parameters
    </a>
</div>

<div class="glass-card form-container" style="padding: 2.5rem; margin-top: 1rem; border-radius: 0;">
    <form method="post">
        {% csrf_token %}
        
        <div class="form-group">
            <label for="id_keyword" class="form-label">Keyword / Search Term</label>
            <input type="text" name="keyword" id="id_keyword" class="form-input" placeholder="e.g. 'refund policy', 'shipping cost', 'how to return'" required value="{% if object %}{{ object.keyword }}{% endif %}" style="border-radius: 0;">
            <span style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;">
                When a visitor asks a question containing this keyword, the response below will be returned.
            </span>
        </div>
        
        <div class="form-group">
            <label for="id_response" class="form-label">Response / Answer</label>
            <textarea name="response" id="id_response" class="form-textarea" placeholder="Enter the exact response that should be returned for this keyword..." required style="border-radius: 0; min-height: 150px;">{% if object %}{{ object.response }}{% endif %}</textarea>
            <span style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;">
                This response will be sent directly to the visitor without calling the AI model.
            </span>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                Save Custom Parameter
            </button>
            <a href="{% url 'admin_custom_parameter_list' %}" class="btn btn-secondary" style="border-radius: 0;">
                Cancel
            </a>
        </div>
</form>
</div>

<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<style>
.tagify {
    --tags-border-color: var(--border-color);
    --tags-hover-border-color: var(--primary);
    --tags-focus-border-color: var(--primary);
    --tag-bg: rgba(99, 102, 241, 0.1);
    --tag-text-color: var(--text-primary);
    border-radius: 0;
    padding: 0;
}
.tagify__input {
    color: var(--text-primary);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var input = document.querySelector('#id_keyword');
    new Tagify(input, {
        delimiters: ",", 
        originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
    });
});
</script>
{% endblock %}