{% extends 'layout.html' %} {% block content %}
<div class="container mt-4">
  <div class="card">
    <div class="card-header d-flex flex-row">
      <h5 class="mt-auto mb-0">Step 3 - Assign Attributes to Streams</h5>
    </div>
    <div class="card-body">
      <div id="edit_panel">
        <div class="text-center mx-auto">
          <i class="fa-solid fa-spinner fa-spin fa-xl p-3"></i>
          <br />
          Finding Attributes from Selected Files
        </div>
      </div>
    </div>
    <div class="card-footer d-flex flex-row">
      <div class="d-flex me-auto">
        <a href="/streams" class="btn btn-sm btn-primary ms-auto mx-1"><b>&ltri; Step 2 - Define Streams</b></a>
        <a href="/export" class="btn btn-sm btn-success ms-auto mx-1"><b>Step 4 - Review and Export &rtri;</b></a>
      </div>
    </div>
  </div>
</div>
{% endblock content %} {% block scripts %}
<script type="text/jsx" src="/static/js/attribute_mapper.jsx"></script>
<script>
  const renderAttributeMapper = async () => {
    const streams = await getStreamSpec();
    const attributeMap = await getAttributeMap();
    const panel = document.getElementById("edit_panel");
    const root = ReactDOM.createRoot(panel);
    setTimeout(() => {
      const element = React.createElement(AttributeMapper, { streams, attributeMap, saveAttributeMap }, null);
      root.render(element);
    }, 1000);
  };
  renderAttributeMapper();
</script>
{% endblock scripts %}