{% extends "base.html" %}
{% block title %}Static Assets — RAZOR SMS PANEL{% endblock %}
{% block content %}
<div class="breadcrumb">
    <h4><i class="fa fa-code"></i> Static Assets Manager</h4>
</div>

<!-- Tabs -->
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;">
    {% for tab, icon, items in [
        ('img','image',imgs),('css','paint-brush',csss),
        ('js','bolt',jss),('html','file-code-o',htmls)
    ] %}
    <button class="btn {% if loop.first %}btn-primary{% else %}btn-default{% endif %} tab-btn"
            onclick="showTab('{{ tab }}')" id="tab-{{ tab }}">
        <i class="fa fa-{{ icon }}"></i> {{ tab.upper() }}
        <span class="badge" style="margin-left:4px;">{{ items|length }}</span>
    </button>
    {% endfor %}
    <a href="{{ url_for('dev.upload') }}" class="btn btn-success" style="margin-left:auto;">
        <i class="fa fa-plus"></i> Upload New
    </a>
</div>

<!-- Section: IMG -->
<div class="tab-section" id="sec-img">
    <div class="widget-block">
        <div class="widget-head"><h5><i class="fa fa-image"></i> Images</h5>
            <a href="{{ url_for('dev.upload') }}?type=img" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i> Add</a>
        </div>
        <div class="widget-content" style="padding:0;">
        {% if imgs %}
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:16px;">
            {% for a in imgs %}
            <div style="background:var(--hover);border:1px solid var(--border);border-radius:8px;overflow:hidden;text-align:center;">
                <div style="padding:10px;font-size:11px;color:var(--muted);">{{ a.filename }}</div>
                <div style="padding:0 10px 10px;display:flex;gap:6px;justify-content:center;">
                    <a href="{{ url_for('dev.edit', asset_id=a.id) }}" class="btn btn-xs btn-default"><i class="fa fa-edit"></i></a>
                    <form method="POST" action="{{ url_for('dev.delete', asset_id=a.id) }}" style="display:inline;" onsubmit="return confirm('Delete?')">
                        <button class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div style="padding:30px;text-align:center;color:var(--muted);">No images yet. <a href="{{ url_for('dev.upload') }}?type=img">Upload one</a></div>
        {% endif %}
        </div>
    </div>
</div>

<!-- Section: CSS -->
<div class="tab-section" id="sec-css" style="display:none;">
    <div class="widget-block">
        <div class="widget-head"><h5><i class="fa fa-paint-brush"></i> CSS Files</h5>
            <a href="{{ url_for('dev.upload') }}?type=css" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i> Add</a>
        </div>
        <div class="widget-content" style="padding:0;">
        {% if csss %}
        <table class="table table-hover"><thead><tr><th>Filename</th><th>Description</th><th>Serve URL</th><th>Actions</th></tr></thead><tbody>
        {% for a in csss %}
        <tr>
            <td><code>{{ a.filename }}</code></td>
            <td><small>{{ a.description or '—' }}</small></td>
            <td><code style="font-size:11px;">/dev/serve/css/{{ a.id }}</code></td>
            <td>
                <a href="{{ url_for('dev.edit', asset_id=a.id) }}" class="btn btn-xs btn-default"><i class="fa fa-edit"></i></a>
                <form method="POST" action="{{ url_for('dev.delete', asset_id=a.id) }}" style="display:inline;" onsubmit="return confirm('Delete?')">
                    <button class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
                </form>
            </td>
        </tr>
        {% endfor %}
        </tbody></table>
        {% else %}
        <div style="padding:30px;text-align:center;color:var(--muted);">No CSS files. <a href="{{ url_for('dev.upload') }}?type=css">Add one</a></div>
        {% endif %}
        </div>
    </div>
</div>

<!-- Section: JS -->
<div class="tab-section" id="sec-js" style="display:none;">
    <div class="widget-block">
        <div class="widget-head"><h5><i class="fa fa-bolt"></i> JavaScript Files</h5>
            <a href="{{ url_for('dev.upload') }}?type=js" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i> Add</a>
        </div>
        <div class="widget-content" style="padding:0;">
        {% if jss %}
        <table class="table table-hover"><thead><tr><th>Filename</th><th>Description</th><th>Serve URL</th><th>Actions</th></tr></thead><tbody>
        {% for a in jss %}
        <tr>
            <td><code>{{ a.filename }}</code></td>
            <td><small>{{ a.description or '—' }}</small></td>
            <td><code style="font-size:11px;">/dev/serve/js/{{ a.id }}</code></td>
            <td>
                <a href="{{ url_for('dev.edit', asset_id=a.id) }}" class="btn btn-xs btn-default"><i class="fa fa-edit"></i></a>
                <form method="POST" action="{{ url_for('dev.delete', asset_id=a.id) }}" style="display:inline;" onsubmit="return confirm('Delete?')">
                    <button class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
                </form>
            </td>
        </tr>
        {% endfor %}
        </tbody></table>
        {% else %}
        <div style="padding:30px;text-align:center;color:var(--muted);">No JS files. <a href="{{ url_for('dev.upload') }}?type=js">Add one</a></div>
        {% endif %}
        </div>
    </div>
</div>

<!-- Section: HTML -->
<div class="tab-section" id="sec-html" style="display:none;">
    <div class="widget-block">
        <div class="widget-head"><h5><i class="fa fa-file-code-o"></i> HTML Pages</h5>
            <a href="{{ url_for('dev.upload') }}?type=html" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i> New Page</a>
        </div>
        <div class="widget-content" style="padding:0;">
        {% if htmls %}
        <table class="table table-hover"><thead><tr><th>Page</th><th>Title</th><th>Live URL</th><th>Actions</th></tr></thead><tbody>
        {% for a in htmls %}
        <tr>
            <td><code>{{ a.filename }}</code></td>
            <td>{{ a.title or '—' }}</td>
            <td>
                <a href="{{ url_for('dev.page_view', slug=a.slug) }}" target="_blank" style="font-size:11px;">
                    <i class="fa fa-external-link"></i> /dev/pages/{{ a.slug }}
                </a>
            </td>
            <td>
                <a href="{{ url_for('dev.edit', asset_id=a.id) }}" class="btn btn-xs btn-default"><i class="fa fa-edit"></i></a>
                <a href="{{ url_for('dev.page_view', slug=a.slug) }}" target="_blank" class="btn btn-xs btn-info"><i class="fa fa-eye"></i></a>
                <form method="POST" action="{{ url_for('dev.delete', asset_id=a.id) }}" style="display:inline;" onsubmit="return confirm('Delete this page?')">
                    <button class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
                </form>
            </td>
        </tr>
        {% endfor %}
        </tbody></table>
        {% else %}
        <div style="padding:30px;text-align:center;color:var(--muted);">No HTML pages. <a href="{{ url_for('dev.upload') }}?type=html">Create one</a></div>
        {% endif %}
        </div>
    </div>
</div>

<script>
function showTab(tab) {
    document.querySelectorAll('.tab-section').forEach(function(s){s.style.display='none';});
    document.querySelectorAll('.tab-btn').forEach(function(b){
        b.className = b.className.replace('btn-primary','btn-default');
    });
    document.getElementById('sec-'+tab).style.display='block';
    var btn = document.getElementById('tab-'+tab);
    btn.className = btn.className.replace('btn-default','btn-primary');
}
</script>
{% endblock %}