{% extends 'base.html' %}
{% block title %}ISM — Procedimientos{% endblock %}
{% block page_title %}ISM — Procedimientos de Trabajo Seguro{% endblock %}
{% block topbar_actions %}
    <a href="{{ url_for('swp_new') }}" class="btn btn-primary">+ Nuevo SWP</a>
    <a href="{{ url_for('msds_index') }}" class="btn btn-secondary">📋 MSDS</a>
{% endblock %}
{% block content %}

<!-- Filtros -->
<div style="display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center">
    {% if is_superadmin and companies %}
    <select onchange="location.href='{{ url_for('ism_index') }}?company_id='+this.value"
        style="padding:7px 12px;border-radius:6px;background:rgba(255,255,255,0.06);
               border:1px solid rgba(0,180,216,0.25);color:var(--white);font-size:13px">
        <option value="">🏢 Todas las compañías</option>
        {% for c in companies %}
        <option value="{{ c.id }}" {% if current_company==c.id %}selected{% endif %}>{{ c.name }}</option>
        {% endfor %}
    </select>
    {% endif %}
    <input type="text" id="swpSearch" placeholder="🔍 Buscar procedimiento..."
        oninput="filterSWP(this.value)"
        style="flex:1;min-width:200px;padding:7px 12px;border-radius:6px;
               background:rgba(255,255,255,0.06);border:1px solid rgba(0,180,216,0.25);
               color:var(--white);font-size:13px">
</div>

<div class="card">
    <div class="table-wrap">
    <table>
        <thead>
            <tr>
                {% if is_superadmin %}<th>Compañía</th>{% endif %}
                <th>Código</th><th>Título</th><th>Categoría</th>
                <th>Versión</th><th>Estado versión</th><th>Vigente desde</th><th>Aprobado por</th><th></th>
            </tr>
        </thead>
        <tbody>
        {% for s in swps %}
        <tr class="swp-row" data-search="{{ (s.code ~ ' ' ~ s.title ~ ' ' ~ s.category ~ ' ' ~ (s.company_name or ''))|lower }}">
            {% if is_superadmin %}
            <td class="text-gray" style="font-size:12px">{{ s.company_name or '—' }}</td>
            {% endif %}
            <td class="text-cyan" style="font-family:monospace;font-weight:600">{{ s.code }}</td>
            <td><strong>{{ s.title }}</strong></td>
            <td>
                {% set cat_map = {'electrical':'⚡ Eléctrico','mechanical':'⚙️ Mecánico',
                   'chemical':'🧪 Químicos','confined':'🔒 Esp. Confinado',
                   'height':'⚓ Altura','welding':'🔥 Soldadura',
                   'hull':'🚢 Casco','other':'📋 Otro'} %}
                <span style="font-size:12px">{{ cat_map.get(s.category, s.category) }}</span>
            </td>
            <td>
                {% if s.version %}
                <span class="badge" style="background:rgba(0,180,216,0.15);color:var(--cyan)">{{ s.version }}</span>
                {% else %}—{% endif %}
            </td>
            <td>
                {% if s.ver_status == 'active' %}
                <span class="badge badge-completed">✅ Aprobada</span>
                {% elif s.ver_status == 'draft' %}
                <span class="badge badge-open">📝 Borrador</span>
                {% elif s.ver_status == 'superseded' %}
                <span class="badge" style="background:rgba(138,155,176,0.2);color:var(--gray)">Sup.</span>
                {% else %}—{% endif %}
            </td>
            <td class="text-gray" style="font-size:12px">{{ s.effective_date or '—' }}</td>
            <td class="text-gray" style="font-size:12px">{{ s.approved_by or '—' }}</td>
            <td class="flex gap-2" style="white-space:nowrap">
                <a href="{{ url_for('swp_detail', sid=s.id) }}" class="btn btn-sm btn-secondary">Ver</a>
                {% if s.ver_status == 'draft' and s.ver_id %}
                <a href="{{ url_for('swp_edit_version', sid=s.id, vid=s.ver_id) }}" class="btn btn-sm btn-warning">✏️</a>
                {% endif %}
                {% if s.ver_status == 'active' %}
                <a href="{{ url_for('swp_pdf', sid=s.id) }}?lang=es" target="_blank" class="btn btn-sm btn-primary">📄 ES</a>
                <a href="{{ url_for('swp_pdf', sid=s.id) }}?lang=en" target="_blank" class="btn btn-sm btn-secondary">📄 EN</a>
                {% endif %}
            </td>
        </tr>
        {% else %}
        <tr><td colspan="9" class="text-gray" style="text-align:center;padding:30px">
            Sin procedimientos. <a href="{{ url_for('swp_new') }}" style="color:var(--cyan)">Crear el primero</a>
        </td></tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
function filterSWP(q) {
    q = q.toLowerCase();
    document.querySelectorAll('.swp-row').forEach(r => {
        r.style.display = (!q || r.dataset.search.includes(q)) ? '' : 'none';
    });
}
</script>
{% endblock %}