{% extends 'base.html' %}
{% block title %}Embarcaciones{% endblock %}
{% block page_title %}Embarcaciones{% endblock %}
{% block topbar_actions %}
    <a href="{{ url_for('vessel_new') }}" class="btn btn-primary">+ Nueva Embarcación</a>
{% endblock %}
{% block head %}
<style>
.vessel-cards { display:none; }
.vessel-table { display:block; }
@media (max-width:768px) {
    .vessel-table { display:none; }
    .vessel-cards { display:grid; grid-template-columns:1fr; gap:10px; }
}
.vcard {
    background:var(--navy2);border:1px solid rgba(0,180,216,0.12);
    border-radius:10px;overflow:hidden;
}
.vcard-header {
    padding:12px 14px;background:rgba(0,0,0,0.25);
    border-bottom:1px solid rgba(255,255,255,0.05);
    display:flex;justify-content:space-between;align-items:center;
}
.vcard-name { font-size:16px;font-weight:600;color:var(--white); }
.vcard-type { font-size:12px;color:var(--cyan); }
.vcard-body { padding:12px 14px; }
.vcard-row { display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px;font-size:13px; }
.vcard-row span { color:var(--gray); }
.vcard-row strong { color:var(--white); }
.vcard-actions {
    display:flex;gap:8px;padding:10px 14px;
    border-top:1px solid rgba(255,255,255,0.05);
    background:rgba(0,0,0,0.1);
}
.vcard-actions a { flex:1;text-align:center; }
</style>
{% endblock %}
{% block content %}
<div style="margin-bottom:14px">
    <input type="text" id="vesselSearch"
        placeholder="🔍 Buscar embarcación..."
        oninput="filterVessels(this.value)"
        style="width:100%;max-width:400px;padding:8px 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>

<!-- TABLA DESKTOP -->
<div class="vessel-table card">
    <div class="table-wrap">
    <table>
        <thead><tr><th>Nombre</th><th>Tipo</th><th>Marca/Modelo</th><th>Año</th><th>Propietario</th><th>Capitán</th><th>WOs</th><th></th></tr></thead>
        <tbody>
        {% for v in vessels %}
        <tr class="vessel-row" data-search="{{ (v.name ~ ' ' ~ (v.owner_name or '') ~ ' ' ~ (v.captain_name or '') ~ ' ' ~ (v.vessel_type or ''))|lower }}">
            <td><strong>{{ v.name }}</strong></td>
            <td>{{ v.vessel_type or '—' }}</td>
            <td class="text-gray">{{ v.make or '' }} {{ v.model or '' }}</td>
            <td>{{ v.year or '—' }}</td>
            <td>{{ v.owner_name or '—' }}</td>
            <td>{{ v.captain_name or '—' }}</td>
            <td><span class="badge" style="background:rgba(0,180,216,0.15);color:var(--cyan)">{{ v.wo_count or 0 }}</span></td>
            <td class="flex gap-2">
                <a href="{{ url_for('vessel_history', vid=v.id) }}" class="btn btn-sm btn-primary">Historial</a>
                <a href="{{ url_for('vessel_edit', vid=v.id) }}" class="btn btn-sm btn-secondary">✏️</a>
            </td>
        </tr>
        {% else %}
        <tr><td colspan="8" class="text-gray" style="text-align:center;padding:30px">Sin embarcaciones.</td></tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
</div>

<!-- TARJETAS MÓVIL -->
<div class="vessel-cards" id="vesselCards">
{% for v in vessels %}
<div class="vcard vessel-row" data-search="{{ (v.name ~ ' ' ~ (v.owner_name or '') ~ ' ' ~ (v.captain_name or '') ~ ' ' ~ (v.vessel_type or ''))|lower }}">
    <div class="vcard-header">
        <div>
            <div class="vcard-name">🚢 {{ v.name }}</div>
            <div class="vcard-type">{{ v.vessel_type or '—' }} {% if v.year %}· {{ v.year }}{% endif %}</div>
        </div>
        <span class="badge" style="background:rgba(0,180,216,0.15);color:var(--cyan);font-size:13px">
            {{ v.wo_count or 0 }} WOs
        </span>
    </div>
    <div class="vcard-body">
        <div class="vcard-row">
            {% if v.make or v.model %}<span>Marca/Modelo:</span><strong>{{ v.make or '' }} {{ v.model or '' }}</strong>{% endif %}
        </div>
        <div class="vcard-row">
            {% if v.owner_name %}<span>Propietario:</span><strong>{{ v.owner_name }}</strong>{% endif %}
            {% if v.captain_name %}<span>Capitán:</span><strong>{{ v.captain_name }}</strong>{% endif %}
        </div>
        {% if v.engine_hours %}<div style="font-size:12px;color:var(--gray)">⚙️ {{ v.engine_hours }} h motor</div>{% endif %}
    </div>
    <div class="vcard-actions">
        <a href="{{ url_for('vessel_history', vid=v.id) }}" class="btn btn-sm btn-primary">📋 Historial</a>
        <a href="{{ url_for('work_order_new') }}?vessel={{ v.id }}" class="btn btn-sm btn-secondary">+ WO</a>
        <a href="{{ url_for('vessel_edit', vid=v.id) }}" class="btn btn-sm btn-secondary">✏️</a>
    </div>
</div>
{% else %}
<div style="text-align:center;padding:40px;color:var(--gray)">Sin embarcaciones registradas.</div>
{% endfor %}
</div>
{% endblock %}
{% block scripts %}
<script>
function filterVessels(q) {
    q = q.toLowerCase().trim();
    document.querySelectorAll('.vessel-row').forEach(r => {
        r.style.display = (!q || r.dataset.search.includes(q)) ? '' : 'none';
    });
}
</script>
{% endblock %}