<%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" meta:resourcekey="PageResource1" %>

<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Threading" %>
<%@ Import Namespace="System.Globalization" %>

<script runat="server">
    String version = WebAppVersion.GetWebAppVersion();

    protected override void InitializeCulture()
    {
        HttpCookie lang = Request.Cookies["siteLanguage"];

        String selectedLanguage = (lang != null) ? lang.Value : "en";
        UICulture = selectedLanguage;
        Culture = selectedLanguage;

        Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(selectedLanguage);
        Thread.CurrentThread.CurrentUICulture = new CultureInfo(selectedLanguage);
        base.InitializeCulture();
    }
</script>

<%
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    Response.Cache.SetExpires(DateTime.Now.AddMinutes(-30)); %>

<link href="<%= ResolveUrl("~/app/pages/eaf/eaf-shift-report/eaf-shift-report.css")%>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/assets/ag-grid/ag-grid.css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/assets/ag-grid/ag-theme-alpine.css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/assets/tailwind/tailwind.min.css") %>" rel="stylesheet" />

<h2 class="professional-title">EAF Shift Report</h2>

<div class="sr-page" data-bind="classes: { hide: not(renderCompleted) }">
    <div data-bind="classes: { hide: isPageLoading }">

        <%-- PAGE HEADER --%>
        <div class="sr-page-header">
            <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; position:relative; z-index:1;">
                <div>
                    <h2 class="sr-title">EAF Shift Report</h2>
                </div>
                <span class="sr-shift-badge" data-bind="text: currentShift"></span>
            </div>
        </div>

        <%-- NAVIGATION BAR --%>
        <div class="sr-nav-bar">
            <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                <button id="backNavBtn" class="sr-nav-btn" data-bind="disabled: isLoading">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                </button>

                <div class="sr-date-group">
                    <input type="text" id="productionDateTbx" class="input-date date-picker" style="z-index:1000;" data-bind="value: productionDate, disabled: isLoading">
                    <button id="calendarBtn" class="sr-calendar-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
                        </svg>
                    </button>
                </div>

                <span class="sr-shift-pill" data-bind="text: shiftId"></span>

                <button id="forwardNavBtn" class="sr-nav-btn" data-bind="disabled: isLoading">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                    </svg>
                </button>

                <button id="refreshBtn" class="sr-btn-primary">
                    <div data-bind="classes: { hide: isLoading }">
                        <span>Refresh</span>
                    </div>
                    <div data-bind="classes: { hide: not(isLoading) }">
                        <div style="display:flex; align-items:center; gap:6px;">
                            <svg class="h-4 w-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <g class="spinner">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
                                </g>
                            </svg>
                            <span>Loading...</span>
                        </div>
                    </div>
                </button>
            </div>

            <button id="downloadPdfBtn" class="sr-btn-primary" data-bind="disabled: isLoading" title="Export PDF">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
                <span>Export PDF</span>
            </button>
        </div>

        <%-- LOADING STATE --%>
        <div data-bind="classes: { hide: not(isLoading) }">
            <div class="sr-loading-container">
                <div class="sr-loading-spinner"></div>
                <p class="sr-loading-text">Loading shift data...</p>
            </div>
        </div>

        <%-- NO DATA STATE --%>
        <div data-bind="classes: { hide: any(hasData, isLoading) }">
            <div class="sr-empty-container">
                <div class="sr-empty-icon">
                    <svg width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                    </svg>
                </div>
                <p class="sr-empty-text">No data available</p>
                <p class="sr-empty-hint">Try selecting a different date or shift</p>
            </div>
        </div>

        <%-- MAIN CONTENT --%>
        <div data-bind="classes: { hide: any(not(hasData), isLoading) }">

            <%-- SECTION 1: Totals & Averages --%>
            <div class="sr-card sr-card--blue">
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--blue">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                    </span>
                    Totals & Averages
                </h3>
                <div class="totals-grid-container w-full"></div>
            </div>

            <%-- SECTION 2: GANTT Timeline --%>
            <div class="sr-grid-1">
                <div class="sr-card sr-card--green" data-bind="classes: { hide: not(showFurnace1Data) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--green">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </span>
                        EAF A Timeline
                    </h3>
                    <div class="furnace1-gantt-screen sr-gantt"></div>
                </div>
                <div class="sr-card sr-card--green" data-bind="classes: { hide: not(showFurnace2Data) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--green">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </span>
                        EAF B Timeline
                    </h3>
                    <div class="furnace2-gantt-screen sr-gantt"></div>
                </div>
            </div>

            <%-- GANTT Legend: Heat Duration + Delay Categories side by side --%>
            <div class="sr-legend">
                <div class="sr-legend-inline">
                    <div class="sr-legend-group">
                        <span class="sr-legend-label">Heat Duration</span>
                        <div class="sr-legend-item"><span class="sr-legend-swatch" style="background:#3ebf3c;"></span><span class="sr-legend-text">&lt; 40 Min</span></div>
                        <div class="sr-legend-item"><span class="sr-legend-swatch" style="background:#f3f317;"></span><span class="sr-legend-text">40-50 Min</span></div>
                        <div class="sr-legend-item"><span class="sr-legend-swatch" style="background:#ff5900;"></span><span class="sr-legend-text">&gt; 50 Min</span></div>
                    </div>
                    <div class="sr-legend-divider"></div>
                    <div class="sr-legend-group" id="gantt-legend-categories">
                        <span class="sr-legend-label">Delay Categories</span>
                    </div>
                </div>
            </div>

            <%-- SECTION 3: Top Delays --%>
            <div class="sr-card sr-card--red">
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--red">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </span>
                    Top Delays
                </h3>
                <div class="delays-grid-container ag-theme-alpine w-full" style="height: 250px;"></div>
            </div>

            <%-- SECTION 4: Charts --%>
            <div class="sr-grid-1">
                <%-- Yield --%>
                <div class="sr-card sr-card--purple" data-bind="classes: { hide: not(hasData_yield) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--purple">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/></svg>
                        </span>
                        Yield
                    </h3>
                    <div class="sr-chart-area yield"></div>
                </div>
            </div>

            <div class="sr-grid-2">
                <%-- Temperature --%>
                <div class="sr-card sr-card--amber" data-bind="classes: { hide: not(hasData_temperature_EAFA) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--amber">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </span>
                        EAF A - Temperature
                    </h3>
                    <div class="sr-chart-area temperature_EAFA"></div>
                </div>
                <div class="sr-card sr-card--amber" data-bind="classes: { hide: not(hasData_temperature_EAFB) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--amber">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </span>
                        EAF B - Temperature
                    </h3>
                    <div class="sr-chart-area temperature_EAFB"></div>
                </div>

                <%-- Oxygen --%>
                <div class="sr-card sr-card--blue" data-bind="classes: { hide: not(hasData_oxygen_EAFA) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--blue">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
                        </span>
                        EAF A - Oxygen
                    </h3>
                    <div class="sr-chart-area oxygen_EAFA"></div>
                </div>
                <div class="sr-card sr-card--blue" data-bind="classes: { hide: not(hasData_oxygen_EAFB) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--blue">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
                        </span>
                        EAF B - Oxygen
                    </h3>
                    <div class="sr-chart-area oxygen_EAFB"></div>
                </div>

                <%-- Residuals 1 --%>
                <div class="sr-card sr-card--slate" data-bind="classes: { hide: not(hasData_residuals_EAFA) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--slate">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                        </span>
                        EAF A - Residuals Graph 1
                    </h3>
                    <div class="sr-chart-area residuals_EAFA"></div>
                </div>
                <div class="sr-card sr-card--slate" data-bind="classes: { hide: not(hasData_residuals_EAFB) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--slate">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                        </span>
                        EAF B - Residuals Graph 1
                    </h3>
                    <div class="sr-chart-area residuals_EAFB"></div>
                </div>

                <%-- Residuals 2 --%>
                <div class="sr-card sr-card--slate" data-bind="classes: { hide: not(hasData_residuals_EAFA_2) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--slate">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                        </span>
                        EAF A - Residuals Graph 2
                    </h3>
                    <div class="sr-chart-area residuals_EAFA_2"></div>
                </div>
                <div class="sr-card sr-card--slate" data-bind="classes: { hide: not(hasData_residuals_EAFB_2) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--slate">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                        </span>
                        EAF B - Residuals Graph 2
                    </h3>
                    <div class="sr-chart-area residuals_EAFB_2"></div>
                </div>

                <%-- KWH/Ton --%>
                <div class="sr-card sr-card--amber" data-bind="classes: { hide: not(hasData_injection_fluxes_EAFA) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--amber">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </span>
                        EAF A - KWH/Ton
                    </h3>
                    <div class="sr-chart-area injection_fluxes_EAFA"></div>
                </div>
                <div class="sr-card sr-card--amber" data-bind="classes: { hide: not(hasData_injection_fluxes_EAFB) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--amber">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </span>
                        EAF B - KWH/Ton
                    </h3>
                    <div class="sr-chart-area injection_fluxes_EAFB"></div>
                </div>

                <%-- Bucket Fluxes --%>
                <div class="sr-card sr-card--purple" data-bind="classes: { hide: not(hasData_bucket_fluxes_EAFA) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--purple">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg>
                        </span>
                        EAF A - Bucket Fluxes
                    </h3>
                    <div class="sr-chart-area bucket_fluxes_EAFA"></div>
                </div>
                <div class="sr-card sr-card--purple" data-bind="classes: { hide: not(hasData_bucket_fluxes_EAFB) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--purple">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg>
                        </span>
                        EAF B - Bucket Fluxes
                    </h3>
                    <div class="sr-chart-area bucket_fluxes_EAFB"></div>
                </div>
            </div>

            <%-- Baghouse (full width) --%>
            <div class="sr-grid-1">
                <div class="sr-card sr-card--slate" data-bind="classes: { hide: not(hasData_baghouse) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--slate">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg>
                        </span>
                        Baghouse
                    </h3>
                    <div class="sr-chart-area baghouse"></div>
                </div>
            </div>

            <%-- SECTION 5a: Log Book (full width) --%>
            <div class="sr-card sr-card--slate" style="margin-bottom:16px;">
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--slate">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                    </span>
                    Log Book
                </h3>
                <div class="logbook-grid-container compact-grid ag-theme-alpine w-full"></div>
            </div>

            <%-- SECTION 5b: Manual Temps (full width, always visible) --%>
            <div class="sr-card sr-card--amber" style="margin-bottom:16px;">
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--amber">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </span>
                    Manual Temperatures Performed
                </h3>
                <div class="manualtemps-grid-container compact-grid ag-theme-alpine w-full"></div>
            </div>

            <%-- SECTION 5b2: Tap Hole / Non-Free Opens (full width, always visible) --%>
            <div class="sr-card sr-card--red" style="margin-bottom:16px;">
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--red">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                    </span>
                    Heats on Tap Hole and Non Free Open Duration
                </h3>
                <div class="taphole-grid-container compact-grid ag-theme-alpine w-full"></div>
            </div>

            <%-- SECTION 5b2: Slag Chemistries - Full Width --%>
            <div class="sr-card sr-card--green" style="margin-bottom:16px;">
                <div style="margin-bottom:10px; display:flex; flex-wrap:wrap; gap:8px;">
                    <span class="sr-aims-text" data-bind="text: structuralAims"></span>
                    <span class="sr-aims-text" data-bind="text: railAims"></span>
                </div>
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--green">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
                    </span>
                    Slag Chemistries
                </h3>
                <div class="slag-grid-container compact-grid ag-theme-alpine w-full"></div>
            </div>

            <%-- SECTION 5c: Recipes (full width) --%>
            <div class="sr-card sr-card--purple" style="margin-bottom:16px;" data-bind="classes: { hide: not(hasData_Recipes) }">
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--purple">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
                    </span>
                    Recipes
                </h3>
                <div class="recipes-grid-container compact-grid ag-theme-alpine w-full"></div>
            </div>

            <%-- SECTION 5d: Recipe Averages (full width, separate card) --%>
            <div class="sr-card sr-card--purple" style="margin-bottom:16px;" data-bind="classes: { hide: not(hasData_RecipesAverage) }">
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--purple">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/></svg>
                    </span>
                    Recipe Averages
                </h3>
                <div class="recipes-average-grid-container w-full"></div>
            </div>

        </div>
    </div>

    <%-- SKELETON LOADING --%>
    <div data-bind="classes: { hide: not(isPageLoading) }">
        <div class="sr-page-header" style="opacity:.6;">
            <div style="display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1;">
                <div>
                    <div class="skeleton-input" style="width:200px; height:24px; margin-bottom:6px; border-radius:4px;"></div>
                    <div class="skeleton-input" style="width:130px; height:14px; border-radius:4px;"></div>
                </div>
                <div class="skeleton-input" style="width:240px; height:32px; border-radius:16px;"></div>
            </div>
        </div>
        <div style="padding:0 4px;">
            <div class="sr-nav-bar" style="opacity:.6;">
                <div style="display:flex; align-items:center; gap:8px;">
                    <div class="skeleton-input" style="width:36px; height:36px; border-radius:6px;"></div>
                    <div class="skeleton-input" style="width:140px; height:36px; border-radius:6px;"></div>
                    <div class="skeleton-input" style="width:50px; height:36px; border-radius:16px;"></div>
                    <div class="skeleton-input" style="width:36px; height:36px; border-radius:6px;"></div>
                </div>
                <div class="skeleton-button" style="width:130px; height:36px; border-radius:6px;"></div>
            </div>
            <div class="sr-card" style="opacity:.5;">
                <div class="skeleton-input" style="width:180px; height:20px; margin-bottom:16px; border-radius:4px;"></div>
                <div class="skeleton-grid w-full" style="height: 50vh; border-radius:6px;"></div>
            </div>
        </div>
    </div>
</div>
