{% extends "base.html" %}
{% block title %}Company Assets Management{% endblock %}

{% block content %}
<style>
  :root {
    --primary-color: #667eea;
    --primary-dark: #764ba2;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
    --purple-color: #8b5cf6;
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.15);
  }

  /* Page Header */
  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
  }

  .page-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .page-subtitle {
    font-size: 1rem;
    opacity: 0.95;
    font-weight: 500;
  }

  /* Summary Cards */
  .summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .summary-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-color);
  }

  .summary-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }

  .summary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  .summary-icon {
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--card-color);
    opacity: 0.15;
  }

  .summary-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .summary-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
  }

  .summary-subtext {
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: 600;
  }

  /* Color variants */
  .summary-card.total { --card-color: #3b82f6; }
  .summary-card.purchase { --card-color: #10b981; }
  .summary-card.current { --card-color: #8b5cf6; }
  .summary-card.depreciation { --card-color: #ef4444; }
  .summary-card.active { --card-color: #10b981; }
  .summary-card.repair { --card-color: #f59e0b; }

  /* Main Card */
  .main-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-color);
    margin-bottom: 2rem;
  }

  .section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Form Styling */
  .form-label {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
  }

  .form-control, .form-select {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    transition: all 0.3s ease;
    font-size: 0.95rem;
  }

  .form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
  }

  /* Buttons */
  .btn {
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
  }

  .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }

  .btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }

  .btn-info {
    background: #3b82f6;
    border: none;
    color: white;
  }

  .btn-info:hover {
    background: #2563eb;
    color: white;
  }

  .btn-danger {
    background: var(--danger-color);
    border: none;
    color: white;
  }

  .btn-danger:hover {
    background: #dc2626;
    color: white;
  }

  /* Search and Filter Bar */
  .filter-bar {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 2px solid var(--border-color);
  }

  .search-input {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.65rem 1rem;
  }

  /* Table Styling */
  .table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }

  .table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .table thead th {
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem;
    border: none;
  }

  .table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
  }

  .table tbody tr:hover {
    background: #f8fafc;
  }

  .table tbody td {
    padding: 1rem;
    vertical-align: middle;
  }

  /* Badge Styling */
  .badge {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .badge-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
  }

  .badge-repair {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
  }

  .badge-retired {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
  }

  .badge-sold {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
  }

  /* Category Breakdown */
  .category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .category-item {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--primary-color);
  }

  .category-name {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
  }

  .category-stat {
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
  }

  /* Pagination */
  .pagination {
    justify-content: center;
    margin-top: 2rem;
  }

  .page-link {
    color: var(--primary-color);
    border: 2px solid var(--border-color);
    margin: 0 0.25rem;
    border-radius: 8px;
    font-weight: 600;
  }

  .page-link:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
  }

  .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
  }

  /* Modal Enhancements */
  .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
  }

  .modal-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  }

  .modal-footer {
    border-top: 1px solid var(--border-color);
  }

  /* Empty State */
  .empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-light);
  }

  .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
  }

  /* Mobile Responsive */
  @media (max-width: 768px) {
    .page-header {
      padding: 1.5rem;
    }

    .page-title {
      font-size: 1.5rem;
    }

    .summary-grid {
      grid-template-columns: 1fr;
    }

    .main-card {
      padding: 1.5rem;
    }

    .table {
      font-size: 0.85rem;
    }

    .category-grid {
      grid-template-columns: 1fr;
    }

    .filter-bar .row {
      gap: 1rem;
    }
  }
</style>

<div class="page-header">
  <div class="page-title">
    <span>🏢</span>
    <span>Company Assets Management</span>
  </div>
  <div class="page-subtitle">Track, manage, and monitor all company assets and their depreciation</div>
</div>

<!-- Summary Statistics -->
<div class="summary-grid">
  <div class="summary-card total">
    <div class="summary-header">
      <div>
        <div class="summary-label">Total Assets</div>
        <div class="summary-value">{{ stats.total }}</div>
        <div class="summary-subtext">Tracked Items</div>
      </div>
      <div class="summary-icon">📦</div>
    </div>
  </div>

  <div class="summary-card purchase">
    <div class="summary-header">
      <div>
        <div class="summary-label">Total Purchase Value</div>
        <div class="summary-value">Rs. {{ "{:,.2f}".format(stats.total_purchase_value) }}</div>
        <div class="summary-subtext">Original Investment</div>
      </div>
      <div class="summary-icon">💰</div>
    </div>
  </div>

  <div class="summary-card current">
    <div class="summary-header">
      <div>
        <div class="summary-label">Current Value</div>
        <div class="summary-value">Rs. {{ "{:,.2f}".format(stats.total_current_value) }}</div>
        <div class="summary-subtext">Present Worth</div>
      </div>
      <div class="summary-icon">💎</div>
    </div>
  </div>

  <div class="summary-card depreciation">
    <div class="summary-header">
      <div>
        <div class="summary-label">Total Depreciation</div>
        <div class="summary-value">Rs. {{ "{:,.2f}".format(stats.total_depreciation) }}</div>
        <div class="summary-subtext">Avg: {{ "{:.1f}".format(stats.avg_depreciation_rate) }}%</div>
      </div>
      <div class="summary-icon">📉</div>
    </div>
  </div>

  <div class="summary-card active">
    <div class="summary-header">
      <div>
        <div class="summary-label">Active Assets</div>
        <div class="summary-value">{{ stats.active }}</div>
        <div class="summary-subtext">In Use</div>
      </div>
      <div class="summary-icon">✅</div>
    </div>
  </div>

  <div class="summary-card repair">
    <div class="summary-header">
      <div>
        <div class="summary-label">In Repair</div>
        <div class="summary-value">{{ stats.in_repair }}</div>
        <div class="summary-subtext">Under Maintenance</div>
      </div>
      <div class="summary-icon">🔧</div>
    </div>
  </div>
</div>

<!-- Add New Asset Form -->
<div class="main-card">
  <div class="section-title">
    <span>➕</span>
    <span>Add New Asset</span>
  </div>
  
  <form method="POST">
    <input type="hidden" name="action" value="add">
    
    <div class="row g-3">
      <div class="col-md-4">
        <label class="form-label">Asset Name *</label>
        <input type="text" name="asset_name" class="form-control" placeholder="e.g., Dell Laptop XPS 15" required>
      </div>
      
      <div class="col-md-4">
        <label class="form-label">Category *</label>
        <select name="category" class="form-select" required>
          <option value="">Select Category</option>
          {% for cat in categories %}
          <option value="{{ cat }}">{{ cat }}</option>
          {% endfor %}
        </select>
      </div>
      
      <div class="col-md-4">
        <label class="form-label">Status *</label>
        <select name="status" class="form-select" required>
          {% for status in statuses %}
          <option value="{{ status }}">{{ status }}</option>
          {% endfor %}
        </select>
      </div>
      
      <div class="col-md-3">
        <label class="form-label">Purchase Date *</label>
        <input type="date" name="purchase_date" class="form-control" required>
      </div>
      
      <div class="col-md-3">
        <label class="form-label">Purchase Price (Rs.) *</label>
        <input type="number" name="purchase_price" class="form-control" step="0.01" placeholder="0.00" required>
      </div>
      
      <div class="col-md-3">
        <label class="form-label">Current Value (Rs.) *</label>
        <input type="number" name="current_value" class="form-control" step="0.01" placeholder="0.00" required>
      </div>
      
      <div class="col-md-3">
        <label class="form-label">Depreciation Rate (%)</label>
        <input type="number" name="depreciation_rate" class="form-control" step="0.1" placeholder="0.0" value="0">
      </div>
      
      <div class="col-md-4">
        <label class="form-label">Location</label>
        <input type="text" name="location" class="form-control" placeholder="e.g., Main Office">
      </div>
      
      <div class="col-md-4">
        <label class="form-label">Assigned To</label>
        <select name="assigned_to" class="form-select">
          <option value="">Not Assigned</option>
          {% for user in all_users %}
          <option value="{{ user }}">{{ user }}</option>
          {% endfor %}
        </select>
      </div>
      
      <div class="col-md-4">
        <label class="form-label">Serial Number</label>
        <input type="text" name="serial_number" class="form-control" placeholder="SN123456">
      </div>
      
      <div class="col-md-4">
        <label class="form-label">Supplier</label>
        <input type="text" name="supplier" class="form-control" placeholder="Supplier Name">
      </div>
      
      <div class="col-md-4">
        <label class="form-label">Warranty Expiry</label>
        <input type="date" name="warranty_expiry" class="form-control">
      </div>
      
      <div class="col-md-4">
        <label class="form-label">Next Maintenance</label>
        <input type="date" name="maintenance_date" class="form-control">
      </div>
      
      <div class="col-md-12">
        <label class="form-label">Notes</label>
        <textarea name="notes" class="form-control" rows="2" placeholder="Additional information about the asset..."></textarea>
      </div>
      
      <div class="col-md-12">
        <button type="submit" class="btn btn-primary">
          <span>✨</span> Add Asset
        </button>
      </div>
    </div>
  </form>
</div>

<!-- Category Breakdown -->
{% if category_breakdown %}
<div class="main-card">
  <div class="section-title">
    <span>📊</span>
    <span>Category Breakdown</span>
  </div>
  
  <div class="category-grid">
    {% for cat_name, cat_data in category_breakdown.items() %}
    <div class="category-item">
      <div class="category-name">{{ cat_name }}</div>
      <div class="category-stat">
        <span>Assets:</span>
        <strong>{{ cat_data.count }}</strong>
      </div>
      <div class="category-stat">
        <span>Purchase Value:</span>
        <strong>Rs. {{ "{:,.2f}".format(cat_data.purchase_value) }}</strong>
      </div>
      <div class="category-stat">
        <span>Current Value:</span>
        <strong>Rs. {{ "{:,.2f}".format(cat_data.current_value) }}</strong>
      </div>
      <div class="category-stat">
        <span>Depreciation:</span>
        <strong style="color: var(--danger-color);">Rs. {{ "{:,.2f}".format(cat_data.purchase_value - cat_data.current_value) }}</strong>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

<!-- Search and Filter -->
<div class="filter-bar">
  <form method="GET" class="row g-3 align-items-end">
    <div class="col-md-3">
      <label class="form-label">Search</label>
      <input type="text" name="q" class="form-control search-input" placeholder="Search assets..." value="{{ search_query }}">
    </div>
    
    <div class="col-md-2">
      <label class="form-label">Category</label>
      <select name="category" class="form-select">
        <option value="All">All Categories</option>
        {% for cat in categories %}
        <option value="{{ cat }}" {% if filter_category == cat %}selected{% endif %}>{{ cat }}</option>
        {% endfor %}
      </select>
    </div>
    
    <div class="col-md-2">
      <label class="form-label">Status</label>
      <select name="status" class="form-select">
        <option value="All">All Statuses</option>
        {% for status in statuses %}
        <option value="{{ status }}" {% if filter_status == status %}selected{% endif %}>{{ status }}</option>
        {% endfor %}
      </select>
    </div>
    
    <div class="col-md-3">
      <label class="form-label">Assigned To</label>
      <select name="assigned" class="form-select">
        <option value="All">All Users</option>
        {% for user in all_users %}
        <option value="{{ user }}" {% if filter_assigned == user %}selected{% endif %}>{{ user }}</option>
        {% endfor %}
      </select>
    </div>
    
    <div class="col-md-2">
      <button type="submit" class="btn btn-primary w-100">🔍 Filter</button>
    </div>
  </form>
</div>

<!-- Assets List -->
<div class="main-card">
  <div class="section-title">
    <span>📋</span>
    <span>Assets List ({{ stats.total }} items)</span>
  </div>
  
  {% if assets %}
  <div class="table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>Asset Name</th>
          <th>Category</th>
          <th>Purchase Date</th>
          <th>Purchase Price</th>
          <th>Current Value</th>
          <th>Depreciation</th>
          <th>Status</th>
          <th>Location</th>
          <th>Assigned To</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for asset in assets %}
        <tr>
          <td><strong>#{{ asset.id }}</strong></td>
          <td>
            <strong>{{ asset.asset_name }}</strong>
            {% if asset.serial_number %}
            <br><small style="color: var(--text-light);">SN: {{ asset.serial_number }}</small>
            {% endif %}
          </td>
          <td>{{ asset.category }}</td>
          <td>{{ asset.purchase_date }}</td>
          <td>Rs. {{ "{:,.2f}".format(asset.purchase_price) }}</td>
          <td>Rs. {{ "{:,.2f}".format(asset.current_value) }}</td>
          <td>
            <span style="color: var(--danger-color);">
              Rs. {{ "{:,.2f}".format(asset.purchase_price - asset.current_value) }}
            </span>
            {% if asset.depreciation_rate > 0 %}
            <br><small>({{ asset.depreciation_rate }}%)</small>
            {% endif %}
          </td>
          <td>
            <span class="badge badge-{{ asset.status.lower().replace(' ', '-') }}">
              {{ asset.status }}
            </span>
          </td>
          <td>{{ asset.location or '-' }}</td>
          <td>{{ asset.assigned_to or '-' }}</td>
          <td>
            <div class="d-flex gap-2">
              <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#editModal{{ asset.id }}">
                ✏️
              </button>
              <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ asset.id }}">
                🗑️
              </button>
            </div>
          </td>
        </tr>

        <!-- Edit Asset Modal -->
        <div class="modal fade" id="editModal{{ asset.id }}" tabindex="-1">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">✏️ Edit Asset: {{ asset.asset_name }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
              </div>
              <form method="POST">
                <input type="hidden" name="action" value="edit">
                <input type="hidden" name="asset_id" value="{{ asset.id }}">
                
                <div class="modal-body">
                  <div class="row g-3">
                    <div class="col-md-6">
                      <label class="form-label">Asset Name *</label>
                      <input type="text" name="asset_name" class="form-control" value="{{ asset.asset_name }}" required>
                    </div>
                    
                    <div class="col-md-6">
                      <label class="form-label">Category *</label>
                      <select name="category" class="form-select" required>
                        {% for cat in categories %}
                        <option value="{{ cat }}" {% if asset.category == cat %}selected{% endif %}>{{ cat }}</option>
                        {% endfor %}
                      </select>
                    </div>
                    
                    <div class="col-md-6">
                      <label class="form-label">Status *</label>
                      <select name="status" class="form-select" required>
                        {% for status in statuses %}
                        <option value="{{ status }}" {% if asset.status == status %}selected{% endif %}>{{ status }}</option>
                        {% endfor %}
                      </select>
                    </div>
                    
                    <div class="col-md-6">
                      <label class="form-label">Purchase Date *</label>
                      <input type="date" name="purchase_date" class="form-control" value="{{ asset.purchase_date }}" required>
                    </div>
                    
                    <div class="col-md-4">
                      <label class="form-label">Purchase Price *</label>
                      <input type="number" name="purchase_price" class="form-control" step="0.01" value="{{ asset.purchase_price }}" required>
                    </div>
                    
                    <div class="col-md-4">
                      <label class="form-label">Current Value *</label>
                      <input type="number" name="current_value" class="form-control" step="0.01" value="{{ asset.current_value }}" required>
                    </div>
                    
                    <div class="col-md-4">
                      <label class="form-label">Depreciation Rate (%)</label>
                      <input type="number" name="depreciation_rate" class="form-control" step="0.1" value="{{ asset.depreciation_rate }}">
                    </div>
                    
                    <div class="col-md-6">
                      <label class="form-label">Location</label>
                      <input type="text" name="location" class="form-control" value="{{ asset.location or '' }}">
                    </div>
                    
                    <div class="col-md-6">
                      <label class="form-label">Assigned To</label>
                      <select name="assigned_to" class="form-select">
                        <option value="">Not Assigned</option>
                        {% for user in all_users %}
                        <option value="{{ user }}" {% if asset.assigned_to == user %}selected{% endif %}>{{ user }}</option>
                        {% endfor %}
                      </select>
                    </div>
                    
                    <div class="col-md-6">
                      <label class="form-label">Serial Number</label>
                      <input type="text" name="serial_number" class="form-control" value="{{ asset.serial_number or '' }}">
                    </div>
                    
                    <div class="col-md-6">
                      <label class="form-label">Supplier</label>
                      <input type="text" name="supplier" class="form-control" value="{{ asset.supplier or '' }}">
                    </div>
                    
                    <div class="col-md-6">
                      <label class="form-label">Warranty Expiry</label>
                      <input type="date" name="warranty_expiry" class="form-control" value="{{ asset.warranty_expiry or '' }}">
                    </div>
                    
                    <div class="col-md-6">
                      <label class="form-label">Next Maintenance</label>
                      <input type="date" name="maintenance_date" class="form-control" value="{{ asset.maintenance_date or '' }}">
                    </div>
                    
                    <div class="col-md-12">
                      <label class="form-label">Notes</label>
                      <textarea name="notes" class="form-control" rows="2">{{ asset.notes or '' }}</textarea>
                    </div>
                  </div>
                </div>
                
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                  <button type="submit" class="btn btn-primary">💾 Save Changes</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!-- Delete Asset Modal -->
        <div class="modal fade" id="deleteModal{{ asset.id }}" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header bg-danger">
                <h5 class="modal-title">🗑️ Delete Asset</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
              </div>
              <form method="POST">
                <input type="hidden" name="action" value="delete">
                <input type="hidden" name="asset_id" value="{{ asset.id }}">
                
                <div class="modal-body">
                  <div class="alert alert-danger">
                    <strong>⚠️ Warning:</strong> This action cannot be undone!
                  </div>
                  <p>Are you sure you want to delete the asset <strong>{{ asset.asset_name }}</strong>?</p>
                </div>
                
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                  <button type="submit" class="btn btn-danger">🗑️ Delete Asset</button>
                </div>
              </form>
            </div>
          </div>
        </div>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {% if total_pages > 1 %}
  <nav>
    <ul class="pagination">
      {% if current_page > 1 %}
      <li class="page-item">
        <a class="page-link" href="?page={{ current_page - 1 }}&category={{ filter_category }}&status={{ filter_status }}&assigned={{ filter_assigned }}&q={{ search_query }}">Previous</a>
      </li>
      {% endif %}
      
      {% for p in range(1, total_pages + 1) %}
      <li class="page-item {% if p == current_page %}active{% endif %}">
        <a class="page-link" href="?page={{ p }}&category={{ filter_category }}&status={{ filter_status }}&assigned={{ filter_assigned }}&q={{ search_query }}">{{ p }}</a>
      </li>
      {% endfor %}
      
      {% if current_page < total_pages %}
      <li class="page-item">
        <a class="page-link" href="?page={{ current_page + 1 }}&category={{ filter_category }}&status={{ filter_status }}&assigned={{ filter_assigned }}&q={{ search_query }}">Next</a>
      </li>
      {% endif %}
    </ul>
  </nav>
  {% endif %}
  
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">🏢</div>
    <p>No assets found. Add your first asset to get started!</p>
  </div>
  {% endif %}
</div>

<!-- Information Card -->
<div class="alert alert-info">
  <strong>ℹ️ Asset Management Tips:</strong>
  <ul class="mb-0 mt-2">
    <li>Track all company assets including equipment, furniture, electronics, and vehicles</li>
    <li>Monitor depreciation to understand asset value over time</li>
    <li>Set warranty expiry and maintenance dates for timely upkeep</li>
    <li>Assign assets to employees for better accountability</li>
    <li>Regular updates help maintain accurate financial records</li>
  </ul>
</div>

{% endblock %}
