<style>
  #header {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    font-family: sans-serif;
  }
  #header img {
    height: 32px;
    margin-right: 12px;
  }
  #header h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  .effibem-viewer { width: 100%; height: {{ height }}; position: relative; }
  .effibem-viewer .controls {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,0.9);
    padding: 10px;
    border-radius: 4px;
    font-family: sans-serif;
    font-size: 12px;
    z-index: 100;
  }
  .effibem-viewer .controls label { display: block; margin: 4px 0; cursor: pointer; }
  .effibem-viewer .controls input { margin-right: 6px; }
  .effibem-viewer .info-panel {
    display: none;
    position: absolute;
    background: rgba(255,255,255,0.95);
    padding: 10px 14px;
    border-radius: 4px;
    font-family: sans-serif;
    font-size: 12px;
    z-index: 100;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: none;
  }
  .effibem-viewer .info-panel h4 { margin: 0 0 8px 0; font-size: 13px; }
  .effibem-viewer .info-panel .info-row { margin: 4px 0; }
  .effibem-viewer .info-panel .info-row.emphasized { background: #1a73e8; color: white; margin: 4px -8px; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
  .effibem-viewer .info-panel .info-row.emphasized .info-label { color: white; }
  .effibem-viewer .info-panel .info-label { color: #666; }
  .effibem-viewer .badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    text-transform: capitalize;
  }
  .effibem-viewer .badge-success { background-color: #198754; color: white; }
  .effibem-viewer .badge-danger { background-color: #dc3545; color: white; }
  .effibem-viewer .diagnostics-section { display: none; }
  .effibem-viewer.include-diagnostics .diagnostics-section { display: block; }
  .effibem-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: sans-serif;
    z-index: 50;
  }
  .effibem-loader.hidden { display: none; }
  .effibem-loader h2 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  .effibem-loader p {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: #666;
  }
  .effibem-loader input[type="file"] {
    font-size: 14px;
  }
</style>

<header id="header">
  <img src="{{ logo_path }}" alt="EffiBEM Logo">
  <h1>EffiBEM Viewer</h1>
</header>

<div id="viewer" class="effibem-viewer">
{% if loader_mode %}
  <div id="loaderPrompt" class="effibem-loader">
    <h2>EffiBEM Viewer</h2>
    <p>Select an OpenStudio GLTF file to visualize</p>
    <input type="file" id="fileInput" accept=".gltf,.json">
  </div>
{% endif %}
  <div class="controls">
    <div style="margin-bottom: 8px;">
      <label style="display: inline;"><strong>Render By</strong></label>
      <select class="renderBy" style="margin-left: 8px; font-size: 12px;">
        <option value="surfaceType">Surface Type</option>
        <option value="boundary">Boundary</option>
        <option value="construction">Construction</option>
        <option value="thermalZone">Thermal Zone</option>
        <option value="spaceType">Space Type</option>
        <option value="buildingStory">Building Story</option>
      </select>
    </div>
    <div style="margin: 8px 0;">
      <label style="display: inline;"><strong>Show Story</strong></label>
      <select class="showStory" style="margin-left: 8px; font-size: 12px;">
        <option value="">All Stories</option>
      </select>
    </div>
    <hr style="margin: 8px 0; border: none; border-top: 1px solid #ccc;">
    <strong>Surface Filters</strong>
    <label><input type="checkbox" class="showFloors" checked> Floors</label>
    <label><input type="checkbox" class="showWalls" checked> Walls</label>
    <label><input type="checkbox" class="showRoofs" checked> Roofs/Ceilings</label>
    <label><input type="checkbox" class="showWindows" checked> Windows</label>
    <label><input type="checkbox" class="showDoors" checked> Doors</label>
    <label><input type="checkbox" class="showShading" checked> Shading</label>
    <label><input type="checkbox" class="showPartitions" checked> Partitions</label>
    <hr style="margin: 8px 0; border: none; border-top: 1px solid #ccc;">
    <label><input type="checkbox" class="showEdges" checked> Show Edges</label>
    <div class="diagnostics-section">
      <hr style="margin: 8px 0; border: none; border-top: 1px solid #ccc;">
      <strong>Geometry Diagnostics</strong>
      <label><input type="checkbox" class="showOnlyNonConvexSurfaces"> Non-Convex Surfaces Only</label>
      <label><input type="checkbox" class="showOnlyIncorrectlyOriented"> Incorrectly Oriented Only</label>
      <label><input type="checkbox" class="showOnlyNonConvexSpaces"> Non-Convex Spaces Only</label>
      <label><input type="checkbox" class="showOnlyNonEnclosedSpaces"> Non-Enclosed Spaces Only</label>
    </div>
  </div>
  <div class="info-panel">
    <h4 class="info-name"></h4>
    <div class="info-row info-type-row"><span class="info-label">Surface Type:</span> <span class="info-type"></span></div>
    <div class="info-row info-space-row"><span class="info-label">Space:</span> <span class="info-space"></span></div>
    <div class="info-row info-spaceType-row"><span class="info-label">Space Type:</span> <span class="info-spaceType"></span></div>
    <div class="info-row info-thermalZone-row"><span class="info-label">Thermal Zone:</span> <span class="info-thermalZone"></span></div>
    <div class="info-row info-buildingStory-row"><span class="info-label">Building Story:</span> <span class="info-buildingStory"></span></div>
    <div class="info-row info-construction-row"><span class="info-label">Construction:</span> <span class="info-construction"></span></div>
    <div class="info-row info-boundary-row"><span class="info-label">Boundary:</span> <span class="info-boundary"></span></div>
    <div class="info-row info-boundaryObject-row"><span class="info-label">Adjacent To:</span> <span class="info-boundaryObject"></span></div>
    <div class="info-row info-sunExposure-row"><span class="info-label">Sun Exposure:</span> <span class="info-sunExposure"></span></div>
    <div class="info-row info-windExposure-row"><span class="info-label">Wind Exposure:</span> <span class="info-windExposure"></span></div>
    <div class="diagnostics-section">
      <div class="info-row info-convex-row"><span class="info-label">Convex:</span> <span class="info-convex"></span></div>
      <div class="info-row info-correctlyOriented-row"><span class="info-label">Correctly Oriented:</span> <span class="info-correctlyOriented"></span></div>
      <div class="info-row info-spaceConvex-row"><span class="info-label">Space Convex:</span> <span class="info-spaceConvex"></span></div>
      <div class="info-row info-spaceEnclosed-row"><span class="info-label">Space Enclosed:</span> <span class="info-spaceEnclosed"></span></div>
    </div>
  </div>
</div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/"
  }
}
</script>

{% if embedded %}
<script type="module">
{{ js_lib_content }}
</script>
{% else %}
<script type="module" src="{{ js_lib_path }}"></script>
{% endif %}

{% if loader_mode %}
<script type="module">
const options = { includeGeometryDiagnostics: {{ include_geometry_diagnostics | tojson }} };
const viewer = new EffiBEMViewer('viewer', options);

document.getElementById('fileInput').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    document.getElementById('loaderPrompt').classList.add('hidden');
    viewer.loadFromFileObject(file);
  }
});
</script>
{% else %}
<script type="module">
const gltfData = {{ gltf_data | tojson(indent=indent) }};

const options = { includeGeometryDiagnostics: {{ include_geometry_diagnostics | tojson }} };
const viewer = new EffiBEMViewer('viewer', options);
viewer.loadFromJSON(gltfData);
</script>
{% endif %}
