{% extends 'base.html' %}
{% block title %}{{ vessel.name }}{% endblock %}
{% block page_title %}{{ vessel.name }}{% endblock %}
{% block topbar_actions %}
    <a href="{{ url_for('work_order_new') }}?vessel={{ vessel.id }}" class="btn btn-primary">+ Nueva Orden</a>
    <a href="{{ url_for('vessel_edit', vid=vessel.id) }}" class="btn btn-secondary">✏️ Editar</a>
    <a href="{{ url_for('vessels') }}" class="btn btn-secondary">← Volver</a>
{% endblock %}
{% block content %}
<div class="grid-2 mb-4">
    <div class="card">
        <div class="card-header">📋 Información</div>
        <table style="font-size:13px">
            <tr><td style="color:var(--gray);padding:6px 0;width:140px">Matrícula</td><td>{{ vessel.registration or '—' }}</td></tr>
            <tr><td style="color:var(--gray);padding:6px 0">Tipo</td><td>{{ vessel.vessel_type or '—' }}</td></tr>
            <tr><td style="color:var(--gray);padding:6px 0">Marca / Modelo</td><td>{{ vessel.make or '' }} {{ vessel.model or '' }}</td></tr>
            <tr><td style="color:var(--gray);padding:6px 0">Año</td><td>{{ vessel.year or '—' }}</td></tr>
            <tr><td style="color:var(--gray);padding:6px 0">Eslora</td><td>{{ vessel.length_ft or '—' }} ft</td></tr>
            <tr><td style="color:var(--gray);padding:6px 0">Motor</td><td>{{ vessel.engine_type or '—' }}</td></tr>
            <tr><td style="color:var(--gray);padding:6px 0">Horas Motor</td><td class="text-cyan">{{ vessel.engine_hours or 0 }} h</td></tr>
        </table>
    </div>
    <div class="card">
        <div class="card-header">👤 Propietario</div>
        <table style="font-size:13px">
            <tr><td style="color:var(--gray);padding:6px 0;width:100px">Nombre</td><td>{{ vessel.owner_name or '—' }}</td></tr>
            <tr><td style="color:var(--gray);padding:6px 0">Teléfono</td><td>{{ vessel.owner_phone or '—' }}</td></tr>
            <tr><td style="color:var(--gray);padding:6px 0">Email</td><td>{{ vessel.owner_email or '—' }}</td></tr>
        </table>
        {% if vessel.captain_name or vessel.captain_phone %}
        <div style="margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.05)">
            <div style="font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;margin-bottom:8px">⚓ Capitán</div>
            <table style="font-size:13px">
                <tr><td style="color:var(--gray);padding:4px 0;width:100px">Nombre</td><td>{{ vessel.captain_name or '—' }}</td></tr>
                <tr><td style="color:var(--gray);padding:4px 0">Teléfono</td><td>{{ vessel.captain_phone or '—' }}</td></tr>
                <tr><td style="color:var(--gray);padding:4px 0">Email</td><td>{{ vessel.captain_email or '—' }}</td></tr>
            </table>
        </div>
        {% endif %}
        {% if vessel.notes %}
        <div class="mt-4" style="font-size:13px;color:var(--gray);border-top:1px solid rgba(255,255,255,0.05);padding-top:12px">
            {{ vessel.notes }}
        </div>
        {% endif %}
    </div>
</div>

<div class="card">
    <div class="card-header">🔧 Historial de Órdenes de Trabajo</div>
    <div class="table-wrap">
    <table>
        <thead><tr><th>Orden</th><th>Tipo</th><th>Descripción</th><th>Técnico</th><th>Fecha</th><th>Estado</th><th></th></tr></thead>
        <tbody>
        {% for o in orders %}
        <tr>
            <td class="text-cyan">{{ o.order_number }}</td>
            <td>{{ o.work_type or '—' }}</td>
            <td>{{ o.description[:60] }}{% if o.description|length > 60 %}...{% endif %}</td>
            <td>{{ o.technician or '—' }}</td>
            <td class="text-gray">{{ o.start_date or o.created_at[:10] }}</td>
            <td><span class="badge badge-{{ o.status }}">{{ o.status.replace('_',' ') }}</span></td>
            <td><a href="{{ url_for('work_order_detail', woid=o.id) }}" class="btn btn-sm btn-secondary">Ver</a></td>
        </tr>
        {% else %}
        <tr><td colspan="7" class="text-gray" style="text-align:center;padding:20px">Sin órdenes de trabajo.</td></tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
</div>
{% endblock %}