{% extends "base.html" %}
{% load my_templatetag %}
{% load static %}

{% block content %}

{% comment %}
{% endcomment %}

<div class="e-content entry-content" itemprop="articleBody text">
  <div>
    <!--<div>
      <form style="display:inline;" action="{% url 'index' %}"><button>Home</button></form> 
      <form style="display:inline;" action="{% url 'index' %}#query"><button>Query</button></form> 
      <form style="display:inline;" action="{% url 'index' %}#results"><button>Results</button></form> 
      <br />
    </div>-->
    <div class="row">
      <!--<div class="col-md-8 col-left docutils container">-->
      <div class="col">
        <br />
        <a href="https://fastspecfit.desi.lbl.gov"><img style="width: 400px;" src="{% static "fastspecfit-logo.png" %}" alt="FastSpecFit Logo"/></a> 
        <br />
        <br />
        <h4>DESI Early Data Release (Fuji)</h4>
        <br />

        <p>Welcome to the <a href="https://fastspecfit.desi.lbl.gov">data
        portal</a> for
        the <a href="https://desi.lbl.gov">DESI</a> <a href="https://fastspecfit.readthedocs.io/en/latest/">FastSpecFit</a>
        value-added catalogs!<p>

        <p>FastSpecFit is a stellar continuum and emission-line modeling code
        for DESI which forward-models the three-camera optical spectrophotometry
        jointly with the optical through infrared broadband photometry of galaxy
        and quasar targets in order to extract a wide range of observed and
        intrinsic physical properties.</p>
        
        <p>Please refer to
           the <a href="https://fastspecfit.readthedocs.io/en/latest/">FastSpecFit
           documentation</a> for full details regarding the code and this data
           release, particularly
           the <a href="https://fastspecfit.readthedocs.io/en/latest/fujilupe.html#acknowledgements">required
           acknowledgments and conditions of use</a>. Questions, problems, or
           feature requests can be communicated to the FastSpecFit development
           team
           by <a href="https://github.com/desihub/fastspecfit/issues">filing a
            ticket</a>.</p>
        <p>Have fun exploring the data!</p>
      </div> <!--close div-col-->
  
      <!--<div class="col-md-8 col-right docutils container">-->
      <div class="col">
        <br /><br /><br /><br />
        <div class="jumbotron">
          <h4>Merged Catalog</h4>
          <p>
            <a href="https://data.desi.lbl.gov/public/edr/vac/edr/fastspecfit/fuji/v3.2/catalogs/fastspec-fuji.fits" download="fastspec-fuji.fits">fastspec-fuji.fits [5.6 GB]</a> <a href="https://fastspecfit.readthedocs.io/en/latest/fastspec.html">(data model)</a><br />
            <!--<a href="https://data.desi.lbl.gov/desi/spectro/fastspecfit/fuji/v2.0/catalogs/fastphot-fuji.fits" download="fastphot-fuji.fits">fastphot-fuji.fits [XXX GB]</a> <a href="https://fastspecfit.readthedocs.io/en/latest/fastphot.html">(data model)</a>-->
          </p>
          
          <h4>On the web</h4>
          <p><a href="https://data.desi.lbl.gov/public/edr/vac/edr/fastspecfit/fuji/v3.2">https://data.desi.lbl.gov/public/edr/vac/edr/fastspecfit/fuji/v3.2</a></p>
          
          <h4>At NERSC (for collaborators)</h4><p>/global/cfs/cdirs/desi/public/edr/vac/edr/fastspecfit/fuji/v3.2</p>
        </div> <!--close div-jumbotron-->
      </div> <!--close div-col-->
    </div> <!--close div-row-->
    
    <div class="container"></div>
      <hr />
      <div><a id="query"></a></div>
  
      <div class="row">
        <div class="col">
          <h3>Query</h3>
          <p>Select a subset of objects using one of the three filter options:
          simple filter, cone search, or upload your own catalog.</p>
        </div> <!--close div-col-->
      </div> <!--close div-row-->
    </div> <!--close div-container-->

    <div style="text-align: center; vertical-align: middle;">
      <div class="row">
        <div class="col" style="text-align: center;">
          <h4>Simple Filter</h4><br style="line-height:0.5em;" />
          <form style="display: inline-block;" method="get" action="#results">
            <table>
              <tr>
                <th class="search_th"><label for="surveymatch">Survey</label></th>
                <td><input id="surveymatch" name="survey__match" type="text"
                value="" placeholder="sv1,sv2,sv3,..."/></td> 
              </tr>
              <tr>
                <th class="search_th"><label for="programmatch">Program</label></th>
                <td><input id="programmatch" name="program__match" type="text" value="" placeholder="bright,dark,..."/></td> 
              </tr>
              <tr>
                <th class="search_th"><label for="tileidmatch">TileIDs</label></th>
                <td><input id="tileidmatch" name="tileid__match" type="text" value="" placeholder="1"/></td> 
              </tr>
              <tr>
                <th class="search_th"><label for="targetidmatch">TargetID</label></th>
                <td><input id="targetidmatch" name="targetid__match" type="text" value="" placeholder="1"/></td> 
              </tr>
              <tr>
                <th class="search_th"><label for="healpixmatch">Healpix</label></th>
                <td><input id="healpixmatch" name="healpix__match" type="text" value="" placeholder="1"/></td> 
              </tr>
              <tr>
                <th class="search_th"><label for="targetclassmatch">Target Class</label></th>
                <td><input id="targetclassmatch" name="targetclass__match" type="text" placeholder="bgs,lrg,elg,qso,..." value="{{targetclass}}"></td> 
              </tr>
              <!--
              <tr>
                <th class="search_th"><label for="zlo">Redshift</label></th>
                <td><input id="zlo" name="z__gte" step="0.01" type="number" value="" placeholder="min" min="0"/></td> 
                <td><input id="zhi" name="z__lte" step="0.01" type="number" value="" placeholder="max" min="0"/></td> 
              </tr>
              -->
            </table>
            <button type="submit" class="btn btn-primary" style="margin-top: 15px;">Filter</button>
          </form>
        </div> <!--close div-col-->
        
        <div class="col" style="text-align: center;">        
          <h4>Cone Search</h4><br style="line-height:0.5em;" />
          <form style="display: inline-block;" method="get" action="#results">
            <table>
              <tr>
                <th class="search_th"><label for="conera">Search RA</label>&nbsp; &nbsp;</th>
                <td><input id="conera" name="conera" step="0.0001" type="number" value="{{cone_ra}}" placeholder="degrees" min="0" max="360"/></td> 
              </tr>
              <tr>
                <th class="search_th"><label for="conedec">Search Dec</label>&nbsp; &nbsp;</th>
                <td><input id="conedec" name="conedec" step="0.0001" type="number" value="{{cone_dec}}" placeholder="degrees" min="-90" max="90"/></td> 
              </tr>
              <tr>
                <th class="search_th"><label for="coneradius">Search Radius</label>&nbsp; &nbsp;</th>
                <td><input id="coneradius" name="coneradius" step="0.01" type="number" value="{{cone_rad}}" placeholder="arcmin" min="0"/></td>
              </tr>
            </table>
            <button type="submit" class="btn btn-primary" style="margin-top: 15px;">Search</button>
          </form>
        </div> <!--close div-col-->
        
        <div class="col" style="text-align: center;">                  
          <h4>Upload Catalog</h4><br style="line-height:0.5em;" />
            <form action="{% url 'upload-catalog' %}" method="POST" enctype="multipart/form-data">{% csrf_token %}
              <input type="file" name="catalog" />
              <button type="submit" value="Upload" id="usercat_submit" class="btn btn-primary" style="margin-top: 15px;">Upload</button>
              <!--<input type="submit" value="Upload" id="usercat_submit" />-->
            </form>
            <br />
            <p style="text-align: left;">The uploaded catalog must be a binary
            FITS table with mandatory, case-insensitive
            columns <i>SURVEY</i>, <i>PROGRAM</i>, <i>HEALPIX</i>
              and <i>TARGETID</i>.</p>

            <p style="text-align: left;">Click <a href="https://github.com/desihub/fastspecfit/blob/main/doc/nb/tutorial-upload-catalog.ipynb">here</a>
            for a simple demonstration of how to generate your own catalog to
            upload.</p> 
        </div> <!--close div-col-->
      </div> <!--close div-row-->
    </div> <!--close div (outer)-->

    <div class="container"></div>
      <hr />
      <div><a id="results"></a></div>

      <div class="row">
        <div class="col">
          <h3>Results</h3>
          <p>Browse the selected sample here or <i>Download</i> the
          results. Click on the <i>TargetID</i> column to view detailed modeling
          results for a specific object.</p>
        </div> <!--close div-col-->
      </div> <!--close div-row-->
    </div> <!--close div-container-->

    <div style="text-align: center; vertical-align: middle;">
      <div class="row">
        <div class="col" style="text-align: center;">
          <form method="post">
            {% csrf_token %}
            <button type="submit" class="btn btn-primary" name="dbutn" >Download</button>
          </form>
          <br />
          <p class="search_log">Showing objects {{ page.start_index }} - {{ page.end_index }} of {{paginator.count}}</p>
        </div> <!--close div-col-->
      </div> <!--close div-row-->

      <div class="row">
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <!--<th style="vertical-align: middle; text-align: center;">Row</th>-->
              <th style="vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'row_index' %}#results">Row Number</a></th>
              <th style="vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'survey' %}#results">Survey</a></th>
              <th style="vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'program' %}#results">Program</a></th>
              <th style="vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'healpix' %}#results">Healpixel</a></th>
              <th style="min-width: 155px; vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'targetid' %}#results">TargetID</a></th>
              <th style="vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'targetclass' %}#results">Target Class(es)</a></th>
              <th style="vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'tileid_list' %}#results">TileID(s)</a></th>
              <th style="vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'ra' %}#results">RA<br />(degrees)</a></th>
              <th style="vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'dec' %}#results">Dec<br />(degrees)</a></th>
              <th style="vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'z' %}#results">Redshift</a></th>
            </tr>
          </thead>
          <tbody>
            {% for sam in page %}
              <tr>
                <!--<td style="vertical-align: middle; text-align: center;">{{ forloop.counter0|add:page.start_index }}</a></td>-->
                <td style="vertical-align: middle; text-align: center;">{{ sam.row_index }}</td>
                <td style="vertical-align: middle; text-align: center;">{{ sam.survey }}</td>
                <td style="vertical-align: middle; text-align: center;">{{ sam.program }}</td>
                <td style="vertical-align: middle; text-align: center;">{{ sam.healpix }}</td>
                <td style="vertical-align: middle; text-align: center;"><a href="{% url 'target' sam.target_name %}?index={{forloop.counter0|add:page.start_index}}" target="_blank">{{ sam.targetid }}</a></td>
                <td style="vertical-align: middle; text-align: center;">{{ sam.targetclass }}</td>
                <td style="vertical-align: middle; text-align: center;">{{ sam.tileid_list }}</td>
                <td style="vertical-align: middle; text-align: center;">{{ sam.ra|floatformat:7 }}</td>
                <td style="vertical-align: middle; text-align: center;">{{ sam.dec|floatformat:6 }}</td>
                <td style="vertical-align: middle; text-align: center;">{{ sam.z|floatformat:8 }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div> <!--close div-row-->
    </div> <!--close div (generic)-->
    
    {% comment %}
    <div class="panel panel-primary accordion"> <!-- Panel (collapasable) -->
        <div class="panel-heading"> <!-- Panel head -->
            <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapseOne">
              <button type="submit" class="btn btn-primary" style="margin-top:15px;">Expand/Collapse Results</button>
            </a>           
        </div> <!-- END Panel head -->
        <br /><br />
        <div id="collapseOne" class="panel-collapse collapse in"> <!-- Collapsable section -->
            <div class="panel-body"> <!-- Panel body -->
              <table class="table table-bordered table-hover">
                <thead>
                  <tr>
                    <th style="vertical-align: middle; text-align: center;">Number</th>
                    <th style="min-width: 155px; vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'targetid' %}#results">TargetID</a></th>
                    <th style="vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'ra' %}#results">RA<br />(degrees)</a></th>
                    <th style="vertical-align: middle; text-align: center;"><a href="?{% url_replace_sort request 'dec' %}#results">Dec<br />(degrees)</a></th>
                  </tr>
                </thead>
                <tbody>
                  {% for sam in page %}
                    <tr>
                      <td style="vertical-align: middle; text-align: center;">{{ forloop.counter0|add:page.start_index }}</a></td>
                      <td style="vertical-align: middle; text-align: center;"><a href="{% url 'target' sam.target_name %}?index={{forloop.counter0|add:page.start_index}}" target="_blank">{{ sam.targetid }}</a></td>
                      <td style="vertical-align: middle; text-align: center;">{{ sam.ra|floatformat:7 }}</td>
                      <td style="vertical-align: middle; text-align: center;">{{ sam.dec|floatformat:6 }}</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div> <!-- END Panel body -->
        </div> <!-- END Collapse section -->
    </div> <!-- end accordian div -->
    {% endcomment %}

    <div style="text-align:center; padding: 10px;">
      <span class="step-links">
        {% if page.has_previous %}
          <a href="?{% url_replace request 'page' 1 %}">&laquo; first</a>
          <a href="?{% url_replace request 'page' page.previous_page_number %}">previous</a>
        {% endif %}
          
        <span class="current">
          Page {{ page.number }} of {{ page.paginator.num_pages }}
        </span>
        
        {% if page.has_next %}
          <a href="?{% url_replace request 'page' page.next_page_number %}#results">next</a>
          <a href="?{% url_replace request 'page' paginator.num_pages %}#results">last &raquo;</a>
        {% endif %}
      </span>
    </div>
    <p>
      <a href="https://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
             src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
             alt="Valid CSS!" />
      </a>
    </p>
    <br /><br />
    
  </div> <!--close div (generic)-->
</div> <!--close div-entry-content-->

{% endblock %}