<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="spectra.css">
    <script src="library/plotly-2.32.0.min.js"></script>
    <script src="constants.js"></script>
    <script src="objconverter.js"></script>
    <script src="prmconverter.js"></script>
    <script src="common.js"></script>  
    <script src="pythonui.js"></script>  
    <script src="guicomps.js"></script>  
    <script src="updategui.js"></script>
    <script src="preprocess.js"></script>
    <script src="postprocess.js"></script>
    <script src="main.js"></script>  
  </head>
  <body oncontextmenu="return false;">

    <div class="dropdown">
      <button class="contextmenu btn btn-secondary dropdown-toggle" type="button" id="scan-prm" data-bs-toggle="dropdown" aria-expanded="false">
        Scan Parameter
      </button>
      <ul id="scan-prm-ul" class="dropdown-menu" aria-labelledby="scan-prm">
        <li><button class="dropdown-item" id="scan-prm-item">Scan This Parameter</button></li>
      </ul>
    </div>
    
    <div class="d-flex flex-column align-items-stretch" id="gui-panel">
      <div id="menubar" class="d-flex border-bottom align-items-center menubar">
      </div>

      <div class="flex-grow-1 d-flex ms-2">
        <div class="d-flex flex-column w-100">
          <nav>
            <div class="nav nav-tabs mt-2 me-2 mb-1 d-flex align-items-center" role="tablist">
              <button id="main-tab" class="nav-link fw-bold active p-2" data-bs-toggle="tab" data-bs-target="#maingui" role="tab"></button>
              <button id="preproc-tab" class="nav-link p-2" data-bs-toggle="tab" data-bs-target="#preproc" role="tab"></button>
              <button id="postproc-tab" class="nav-link p-2" data-bs-toggle="tab" data-bs-target="#postproc" role="tab"></button>
              <div class="d-flex flex-grow-1 ms-3">
                <div class="d-none spinner-border spinner-border-sm text-primary" id="spinner"></div>
              </div>
            </div>
          </nav>

          <div class="tab-content d-flex flex-grow-1">
            <div id="maingui" class="tab-pane show active" role="tabpanel">
              <div class="d-flex flex-column">
                <div id="calcid" class="badge text-bg-light text-end">Calculation Type: Unselected</div>
                <div class="d-flex">
                  <div class="card inputprm">
                    <div id="acc-header" class="card-header pt-0 pb-0">Accelerator</div>
                    <div class="card-body p-2" id="acc-div"></div>
                  </div>  
                  <div class="card inputprm">
                    <div id="src-header" class="card-header pt-0 pb-0">Light Source</div>
                    <div class="card-body p-2" id="src-div"></div>
                  </div>
                  <div class="d-flex flex-column">
                    <div id="config-card" class="d-none card inputprm flex-grow-1" >
                      <div class="card-header pt-0 pb-0">Configurations</div>
                      <div class="card-body p-2" id="config-div"></div>
                    </div>
                    <div class="card inputprm flex-grow-1">
                      <div id="outfileheader" class="card-header pt-0 pb-0">Output File</div>
                      <div class="card-body p-2" id="outfile-div" ></div>
                    </div>              
                    <div id="calcproc-card" class="card inputprm d-none">
                      <div class="card-header pt-0 pb-0">Calculation Process/Status</div>
                      <div class="card-body p-2" id="calcproc-div" ></div>
                    </div>          
                  </div>  
                </div>
              </div>
            </div>   
    
            <div id="preproc" class="tab-pane" role="tabpanel">
              <div class="d-flex align-items-start">
                <div class="d-flex flex-column">
    
                  <div id="preproc-item-div" class="card m-0 ppprm">
                    <div class="card-header d-flex pt-0 pb-0"> Select Operation/Item to Plot
                    </div>
                    <div class="card-body p-2">
                      <div class="d-flex flex-column align-items-stretch">
                        <select id="preproc-select" onchange="ArrangePPPanel()"></select>  
                        <div class="d-flex justify-content-end">
                          <button class="btn btn-primary btn-sm mt-1 d-none" id="preproc-units" onclick="EditUnits()"></button>
                          <button class="btn btn-outline-primary btn-sm mt-1 d-none" id="preproc-import" onclick="ImportData()"></button>
                        </div>
                      </div>
                    </div>
                  </div>
    
                  <div id="preproc-conf-div" class="d-none card m-0 ppprm">
                    <div class="card-header d-flex pt-0 pb-0">Configurations
                    </div>
                    <div class="card-body p-2">
    
                      <div id="preproc-config"></div>
    
                      <div id="preproc-part" class="d-none flex-column">
                        <div class="mb-0">Data File</div>
                        <div id="partdataname" class="mt-0 mb-1" style="white-space:normal; word-break:break-all">Not Selected</div>
                        <div class="d-flex justify-content-between align-items-end mt-1">
                          <div>File Contents</div>
                          <button class="btn btn-outline-primary btn-sm" id="preproc-load" onclick="ImportParticle()"></button>
                        </div>
                        <textarea id="preproc-part-cont" wrap="off" style="font-size: small"></textarea>
                        <div id="preproc-part-anadiv">
                          <div id="preproc-part-plotconf-div">
                            <hr class="mt-2 mb-2">
                            <div id="preproc-part-plotconf"></div>
                          </div>
                        </div>
                      </div>
    
                    </div>
                  </div>
    
                  <div class="flex-grow-1"></div>
    
                  <div id="expbtn" class="d-none btn-group mt-1">
                    <button id="preproc-ascii" class="btn btn-outline-primary btn-sm" onclick="ExportPreProcess(0)"></button>
                    <button id="preproc-duplicate" class="btn btn-primary btn-sm" onclick="ExportPreProcess(1)"></button>
                  </div>
    
                </div>
                <div id="preproc-plot" class="d-flex flex-column align-items-stretch resizableplot"></div>  
              </div>
            </div>
    
            <div id="postproc" class="tab-pane" role="tabpanel">
              <div class="d-flex align-items-start">
                <div id="postproc-conf-div" class="card ppprm">
                  <div class="card-header d-flex pt-0 pb-0">Post-Processing Configurations
                  </div>
                  <div class="card-body p-2 d-flex flex-column">
                    <div id="resultdata" class="d-flex mb-4 flex-column align-items-stretch"></div>
                    <div id="viewresult" class="d-none flex-column flex-grow-1">
                      <div id="postp-view-cont" class="d-flex flex-column h-100"></div>
                    </div>
                  </div>
                </div>
                <div id="postp-plot" class="d-flex flex-column align-items-stretch resizableplot"></div>  
              </div>
            </div>           
          </div>  
        </div>
     </div>
    </div>

    <input type="file" id="file-main" class="d-none">

    <button type="button" class="d-none" data-bs-toggle="modal" data-bs-target="#modalDialog" id="showModal"></button>  
    <div class="modal" id="modalDialog" tabindex="-1" aria-labelledby="modalDialogLabel" aria-hidden="true">
      <div id="modaldlg" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header p-2">
            <div class="modal-title" id="modalDialogLabel">
            </div>
          </div>
          <div class="modal-body d-flex flex-column text-wrap" id="modalDialogCont">
          </div>
          <div class="modal-footer p-2">
            <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal" id="modalCancel">Cancel</button>
            <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal" id="modalOKsimple">OK</button>
          </div>
        </div>
      </div>
    </div>

    <button type="button" class="d-none" data-bs-toggle="modal" data-bs-target="#modalMaterial" id="showMaterial"></button>  
    <div class="modal" id="modalMaterial" tabindex="-1" aria-labelledby="modalMaterialLabel" aria-hidden="true">
      <div class="modal-dialog modal-expand">
        <div class="modal-content">
          <div class="modal-header p-2">
            <div class="modal-title" id="modalMaterialLabel">Filter/Absorber Materials Available</div>
          </div>
          <div class="modal-body d-flex" id="modalMaterialCont" style="overflow: auto;">
          </div>
          <div class="modal-footer p-2">
            <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal" onclick="SetMaterial()">OK</button>
          </div>
        </div>
      </div>
    </div>       

    <button type="button" class="d-none" data-bs-toggle="modal" data-bs-target="#modalPrmset" id="showPrmset"></button>  
    <div class="modal" id="modalPrmset" tabindex="-1" aria-labelledby="modalPrmsetlLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl" >
        <div class="modal-content">
          <div class="modal-header p-2">
            <div class="modal-title" id="modalPrmsetlLabel">Edit Parameter Sets</div>
          </div>
          <div class="modal-body d-flex flex-column align-items-stretch pt-0 pb-2" id="modalPrmsetCont">
            <div class="container">
              <div class="row">
                <div class="col p-1">
                  <div class="pb-0">Beamline</div>
                  <div class="pt-0" id="editbl"></div>                      
                </div>
                <div class="col p-1">
                  <div class="pb-0">Accelerator</div>
                  <div class="pt-0" id="editacc"></div>                      
                </div>  
              </div>
              <div class="row">
                <div class="col p-1">
                  <div class="pb-0">Light Source</div>
                  <div class="pt-0" id="editsrc"></div>                      
                </div>
                <div class="col p-1">
                  <div class="pb-0">Configurations</div>
                  <div class="pt-0" id="editconf"></div>                      
                </div>  
              </div>
            </div>            
            <did id="sortarea" class="d-flex align-items-center"></did>
            <div id="prmstatus" class="alert alert-secondary p-0 ps-2 m-0 mt-2"></div>
          </div>
          <div class="modal-footer d-flex p-2">
            <input type="text" id="editname" class="flex-grow-1">
            <div class="btn-group">
              <button id="ren-prmedit" type="button" class="btn btn-sm btn-outline-primary">Rename</button>
              <button id="dupl-prmedit" type="button" class="btn btn-sm btn-outline-primary">Duplicate</button>
              <button id="del-prmedit" type="button" class="btn btn-sm btn-outline-primary">Delete</button>  
            </div>
            <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal" onclick="LoadRevisedPrmSet(true)">OK</button>
          </div>
        </div>
      </div>
    </div>
    <script>var iniFile = ""; var iniBL = ""; var iniPP = ""; var iniLPP = ""; var iniDir = ""</script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script>iniFile = "<?php echo isset($_GET['file']) ? $_GET['file'] : ''; ?>" </script>
    <script>iniBL = "<?php echo isset($_GET['bl']) ? $_GET['bl'] : ''; ?>" </script>
    <script>iniPP = "<?php echo isset($_GET['pp']) ? $_GET['pp'] : ''; ?>" </script>
    <script>iniLPP = "<?php echo isset($_GET['lpp']) ? $_GET['lpp'] : ''; ?>" </script>
    <script>iniDir = "<?php echo isset($_GET['dir']) ? $_GET['dir'] : ''; ?>" </script>
  </body>
</html>

