{% extends "base.html" %}

{% block title %}Материалы{% endblock %}

{% block content %}
    <!-- Заголовок -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="page-title">Материалы</h2>
        <span class="badge" style="background: linear-gradient(135deg, var(--steel-blue) 0%, #3a6d99 100%); color: white; padding: 8px 15px; border-radius: 20px; font-size: 1rem;">
            <i class="fas fa-cube me-1"></i> Всего: {{ materials|length }}
        </span>
    </div>

    <!-- Список материалов -->
    {% if materials %}
        <div class="row">
            {% for material in materials %}
                <div class="col-md-4 mb-3">
                    <div class="material-card">
                        <div class="material-card-header">
                            <h5 class="material-title">
                                <i class="fas fa-cube"></i> {{ material.material_name }}
                            </h5>
                        </div>
                        <div class="material-card-body">
                            {% if material.description %}
                                <p class="material-description">{{ material.description }}</p>
                            {% endif %}
                            
                            <div class="material-properties">
                                {% if material.category %}
                                <div class="property-item">
                                    <span class="property-label">Категория:</span>
                                    <span class="property-value">{{ material.category }}</span>
                                </div>
                                {% endif %}
                                
                                {% if material.color %}
                                <div class="property-item">
                                    <span class="property-label">Цвет:</span>
                                    <span class="property-value">{{ material.color }}</span>
                                </div>
                                {% endif %}
                                
                                {% if material.density %}
                                <div class="property-item">
                                    <span class="property-label">Плотность:</span>
                                    <span class="property-value">{{ material.density }} кг/м³</span>
                                </div>
                                {% endif %}
                                
                                {% if material.thickness %}
                                <div class="property-item">
                                    <span class="property-label">Толщина:</span>
                                    <span class="property-value">{{ material.thickness }} мм</span>
                                </div>
                                {% endif %}
                                
                                {% if material.supplier %}
                                <div class="property-item">
                                    <span class="property-label">Поставщик:</span>
                                    <span class="property-value">{{ material.supplier }}</span>
                                </div>
                                {% endif %}
                                
                                {% if material.country %}
                                <div class="property-item">
                                    <span class="property-label">Страна:</span>
                                    <span class="property-value">{{ material.country }}</span>
                                </div>
                                {% endif %}
                                
                                {% if material.wear_class %}
                                <div class="property-item">
                                    <span class="property-label">Класс износа:</span>
                                    <span class="property-value">{{ material.wear_class }}</span>
                                </div>
                                {% endif %}
                            </div>
                            
                            <div class="material-price-stock">
                                {% if material.price_per_unit %}
                                <div class="price-item">
                                    <span class="price-label">Цена:</span>
                                    <span class="price-value">{{ material.price_per_unit|int }} руб./{{ material.unit or 'шт' }}</span>
                                </div>
                                {% endif %}
                                
                                <div class="stock-item">
                                    <span class="stock-label">В наличии:</span>
                                    <span class="stock-value {% if material.in_stock and material.in_stock > 0 %}text-success{% else %}text-danger{% endif %}">
                                        {{ material.in_stock or 0 }} {{ material.unit or 'шт' }}
                                    </span>
                                </div>
                            </div>
                            
                            <div class="material-footer">
                                <small class="text-muted">
                                    <i class="far fa-calendar-alt"></i> Добавлено: {{ material.created_at[:10] if material.created_at else '-' }}
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="alert alert-info text-center py-5">
            <i class="fas fa-cube fa-3x mb-3" style="color: var(--light-steel-blue);"></i>
            <h4 class="mb-3">Нет материалов</h4>
            <p class="mb-0">В базе данных пока нет материалов. Добавьте материалы через импорт данных.</p>
        </div>
    {% endif %}

    <style>
        .page-title {
            color: var(--steel-blue);
            font-size: 1.8rem;
            font-weight: 600;
            font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
        }
        
        .material-card {
            background: linear-gradient(135deg, var(--alice-blue) 0%, #E6F2FF 100%);
            border: 1px solid var(--light-steel-blue);
            border-radius: 12px;
            padding: 15px;
            height: 100%;
            box-shadow: 0 4px 8px rgba(70, 130, 180, 0.1);
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
        }
        
        .material-card:hover {
            box-shadow: 0 8px 16px rgba(70, 130, 180, 0.2);
            border-color: var(--steel-blue);
            transform: translateY(-2px);
        }
        
        .material-card-header {
            border-bottom: 1px solid var(--light-steel-blue);
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        
        .material-title {
            color: var(--steel-blue);
            font-size: 1.2rem;
            font-weight: 600;
            margin: 0;
            font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
        }
        
        .material-title i {
            margin-right: 8px;
            color: var(--light-steel-blue);
        }
        
        .material-description {
            color: #2c3e50;
            margin-bottom: 12px;
            font-size: 0.95rem;
            line-height: 1.5;
            padding-bottom: 8px;
            border-bottom: 1px dashed var(--light-steel-blue);
        }
        
        .material-properties {
            margin-bottom: 12px;
        }
        
        .property-item {
            margin-bottom: 5px;
            font-size: 0.9rem;
            display: flex;
            justify-content: space-between;
        }
        
        .property-label {
            color: #6c757d;
            font-weight: 500;
        }
        
        .property-value {
            color: #2c3e50;
            font-weight: 500;
        }
        
        .material-price-stock {
            background-color: rgba(70, 130, 180, 0.1);
            border-radius: 8px;
            padding: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        
        .price-item, .stock-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }
        
        .price-label, .stock-label {
            color: #6c757d;
            font-weight: 500;
        }
        
        .price-value {
            color: var(--steel-blue);
            font-weight: 700;
            font-size: 1.1rem;
        }
        
        .stock-value {
            font-weight: 600;
        }
        
        .text-success {
            color: #28a745 !important;
        }
        
        .text-danger {
            color: #dc3545 !important;
        }
        
        .material-footer {
            margin-top: auto;
            padding-top: 8px;
            border-top: 1px solid var(--light-steel-blue);
            font-size: 0.85rem;
        }
        
        .alert-info {
            border-radius: 12px;
            border: 2px dashed var(--light-steel-blue);
            background: linear-gradient(135deg, var(--alice-blue) 0%, #E6F2FF 100%);
            color: #2c3e50;
        }
        
        .alert-info i {
            color: var(--steel-blue);
        }
        
        .alert-info h4 {
            color: var(--steel-blue);
            font-weight: 600;
        }
        
        .badge {
            font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
        }
        
        @media (max-width: 768px) {
            .col-md-4 {
                width: 100%;
            }
            
            .property-item {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
{% endblock %}