<main class="main-container animated fadeIn">
    <app-btn-navigate navigate="/sam/GIST" nameButton="Gestión de Inventario y/o Stock"/>
    <mat-card class="override-card override-elevation-z8">
        <section class="override-section">
            <nav class="override-nav">
                <div class="w-100 align-center pv-15">
                    <span class="title-card">Intercambio de Artículos entre Almacenes</span>
                </div>

                <div class="override-actions">
                    <app-search-card 
                        [dataSource]="dataSource" 
                        [disabled]="isLoading || isLoadingForm" 
                        (dataValue)="dataSource = $event" />
                    <div class="override-buttons">
                        <button 
                            mat-mini-fab 
                            matTooltip="Actualizar Datos"
                            (click)="getExchangeArticles()"
                            class="cyan_dark_background white_font override_no_shadow ml-8">
                            <mat-icon>refresh</mat-icon>
                        </button>
                    </div>
                </div>
            </nav>
            
            <app-loading-card 
                [isLoading]="isLoading" 
                [txtLoading]="'Cargando información de la ubicación.'"
            />

            <div class="container-cards" *ngIf="resourcesService.innerWidth() >= 1760">
                <div *ngFor="let article of dataSource.data" class="card-item">
                    <div class="card-section-img">
                        <img [src]="article.IMAGENES[0]">
                    </div>
                    <div class="card-section-info">
                        <div class="card-section-info-data">
                            <div class="code">{{ article.CODIGO }}</div>
                            <div class="align-center mb-12 gray_dark_font">
                                <span>{{ article.MODELO }}</span> - <span>{{ article.CODIGO_MODELO }}</span>
                            </div>
                            <div class="mb-8">
                                <b>Número de Stock: </b> <span>#{{ article.ID_STOCK }}</span>
                            </div>
                            <div><b>Almacen: </b><span>{{ article.NOMBRE_ALMACEN }}</span></div>
                            <div><b>Área:    </b><span>{{ article.NOMBRE_AREA    }}</span></div>
                            <div><b>Nivel:   </b><span>{{ article.NOMBRE_NIVEL   }}</span></div>
                            <div><b>Zona:    </b><span>{{ article.NOMBRE_ZONA    }}</span></div>
                        </div>
                        <div class="card-section-info-footer" align="end">
                            <button mat-button (click)="openDialog(article)">Modificar Ubicación</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-cards-small" *ngIf="resourcesService.innerWidth() < 1760">
                <div *ngFor="let article of dataSource.data" class="card-item-small">
                    <div class="code">{{ article.CODIGO }}</div>
                    <div class="align-center mb-12 gray_dark_font">
                        <span>{{ article.MODELO }}</span> - <span>{{ article.CODIGO_MODELO }}</span>
                    </div>
                    <div class="card-section-img-small">
                        <img [src]="article.IMAGENES[0]">
                    </div>
                    <div class="card-section-info-footer" align="end">
                        <button mat-button (click)="openDialog(article)">Modificar Ubicación</button>
                    </div>
                </div>
            </div>
        </section>
    </mat-card>
</main>