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

{% block title %}Settings{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Settings</h1>
    <p class="page-subtitle">Configure pricing and system settings</p>
</div>

<div class="card">
    <div class="card-header">
        <h2 class="card-title">Pricing Configuration</h2>
    </div>

    {% if pricing_configs %}
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Setting</th>
                    <th>Description</th>
                    <th>Value</th>
                    <th>Unit</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for config in pricing_configs %}
                <tr>
                    <td><strong>{{ config.config_key }}</strong></td>
                    <td>{{ config.description or '-' }}</td>
                    <td>
                        <form method="POST" action="/manage/settings/pricing/{{ config.id }}" class="inline-form" id="form-{{ config.id }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                            <input type="text" name="value" class="form-input" value="{{ config.config_value }}" style="width: 120px;">
                        </form>
                    </td>
                    <td>{{ config.unit or '-' }}</td>
                    <td>
                        <button type="submit" form="form-{{ config.id }}" class="btn btn-sm btn-primary">Save</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon">⚙️</div>
        <div class="empty-state-text">No pricing configuration found</div>
        <p style="color: var(--text-color-light); margin-top: 8px;">
            Run the database initialization to set up default pricing.
        </p>
    </div>
    {% endif %}
</div>

<div class="card" style="margin-top: 24px;">
    <div class="card-header">
        <h2 class="card-title">System Information</h2>
    </div>
    <div class="detail-row">
        <span class="detail-label">Application</span>
        <span class="detail-value">MyWebdav Cloud Storage</span>
    </div>
    <div class="detail-row">
        <span class="detail-label">Admin Panel Version</span>
        <span class="detail-value">1.0.0</span>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.inline-form {
    display: inline;
}
</style>
{% endblock %}