{#
# Jinja2 template for the  PyDIET ETC form of the WIRCam instrument.
#
# Copyright CFHT/CNRS/OSUPS/CEA/UParisSaclay
# Licensed under the MIT licence
#}
<ion-card>
  <img alt="" src="{{ root_path }}/client/images/{{ instrument }}/background.jpg" style="height: 100%; overflow: hidden; min-width: 1920px; width: 100%" />
  <img alt="{{ instrument }} logo" src="{{ root_path }}/client/images/{{ instrument }}/logo.png" style="margin: -125px 0px 20px 10px; filter: drop-shadow(4px 4px 4px #000000);" />
<ion-card-content>
<form id="etc-form">
  <ion-grid>
    <ion-row class="ion-align-items-center">
      <!----------------------------- compute -------------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-select onfocus="
              /* Change use of SNR input to exposure time if SNR is output */
              const snr=document.querySelector('.snr');
              if (this.value=='snr') {
                snr.name = 'etime';
                snr.label = 'Exposure Time [ s ]';
              } else {
                snr.name = 'snr';
                snr.label = 'Signal-to-Noise ratio';
              }
              " name="compute" label="Compute" width="200px" label-placement="floating" fill="solid" interface="popover" value="etime">
            <ion-select-option value="etime">exposure time</ion-select-option>
            <ion-select-option value="snr">SNR</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>

      <!----------------------- Number of exposures -------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-input oninput="
              /* Change use of SNR input to exposure time if SNR is output */
              const stacking=document.querySelector('.stacking');
              if (this.value > 1) {
                stacking.classList.remove('ion-hide');
              } else {
                stacking.classList.add('ion-hide');
              }
              " name="exposures" label="Exposures" label-placement="floating" fill="solid" type="number" inputmode="numeric" min="1" step="1"  value="1"></ion-input>
        </ion-item>
      </ion-col>

      <!----------------------------- Stacking ------------------------------->
      <ion-col class="stacking ion-hide" size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-select name="stacking" label="Stacking" label-placement="floating" fill="solid" interface="popover" value="median">
            <ion-select-option value="average">average</ion-select-option>
            <ion-select-option value="median">median</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>

      <!--------------------------- snr or etime ----------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-input class="snr" name="snr" label="Signal-to-Noise ratio" label-placement="floating" fill="solid" type="number" inputmode="decimal" min="0.0" step="0.1"  value="10.0"></ion-input>
        </ion-item>
      </ion-col>

      <!----------------------------- source --------------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-select onfocus="
              /* Display galaxy-related inputs if the source type is 'galaxy' */
              const gal=document.querySelectorAll('.galaxy'),
                phot=document.querySelector('.photometry'),
                bright=document.querySelector('.brightness');
              if (this.value == 'galaxy')
                gal.forEach(el => el.classList.remove('ion-hide'));
              else
                gal.forEach(el => el.classList.add('ion-hide'));
              if (this.value == 'extended') {
                phot.classList.add('ion-hide');
                const slot = bright.querySelector(`[slot='label']`);
                var label = slot.innerHTML;
                if (!label.includes('arcsec'))
                  slot.innerHTML = label.includes(']') ?
                    label.replace(']', '.arcsec&#8315;&sup2;]')
                    : label + '.arcsec&#8315;&sup2;';
              } else {
                phot.classList.remove('ion-hide');
                const slot = bright.querySelector(`[slot='label']`);
                var label = slot.innerHTML;
                slot.innerHTML = label.replace('.arcsec&#8315;&sup2;', '');
              }
              " class="source" name="source" label="Source type" label-placement="floating" fill="solid" interface="popover" value="point_source">
            <ion-select-option value="point_source">point source</ion-select-option>
            <ion-select-option value="galaxy">galaxy</ion-select-option>
            <ion-select-option value="extended">extended</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>

      <!-------------------------- sersic_radius ----------------------------->
      <ion-col class="galaxy ion-hide" size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-input name="sersic_radius" label="Sérsic Rₑ [ &quot; ]" label-placement="floating" fill="solid" type="number" inputmode="decimal" min="0.0" max="10.0" step="0.1" value="1.0"></ion-input>
        </ion-item>
      </ion-col>

      <!-------------------------- sersic_index ------------------------------>
      <ion-col class="galaxy ion-hide" size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
         <ion-input name="sersic_index" label="Sérsic index" label-placement="floating" fill="solid" type="number" inputmode="decimal" min="0.4" max="10.0" step="0.1" value="1.0"></ion-input>
        </ion-item>
      </ion-col>

      <!----------------------------- seeing --------------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-input name="seeing" label="Seeing  [ &quot; ]" label-placement="floating" fill="solid" type="number" inputmode="decimal" min="0.1" max="20.0" step="0.01" value="0.7"></ion-input>
        </ion-item>
      </ion-col>

      <!----------------------------- filter --------------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-select onfocus="
              /* Display filter upload menu if filter is 'upload'*/
              const filt=document.querySelector('.filter-upload'),
                inp=filt.querySelector('input');
              if (this.value == 'upload') {
                filt.classList.remove('ion-hide');
                inp.required = true;
              } else {
                filt.classList.add('ion-hide');
                inp.required = false;
                inp.value = '';
              }
              " id=select-filters name="filter" label="Filter" label-placement="floating" fill="solid" interface="popover" value="J">
              <ion-select-option value="">Choose filter</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>

      <!--------------------------- filter file ------------------------------>
      <ion-col class="filter-upload ion-hide" size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
         <input name="filter_upload" label="Filter upload" label-placement="floating" fill="solid" type="file" accept=".fits,.fit,application/fits"></ion-input>
        </ion-item>
      </ion-col>

      <!--------------------------- brightness ------------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-input class="brightness" name="brightness" label-placement="floating" fill="solid" type="number" inputmode="decimal" min="-40.0" max="40.0" step="0.01" value="20.0">
            <div slot="label">Source AB magnitude</div>
          </ion-input>
        </ion-item>
      </ion-col>

      <!------------------------------ unit ---------------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
           <ion-select onfocus="
              /* Change brightness label depending on unit */
              const bright=document.querySelector('.brightness'),
                slot=bright.querySelector(`[slot='label']`),
                extended=document.querySelector('.source').value == 'extended';
              if (this.value=='abmag' || this.value=='vegamag') {
                slot.innerHTML = this.value=='vegamag' ?
                  'Source Vega magnitude'
                  : 'Source AB magnitude';
                if (extended && !slot.innerHTML.includes('arcsec'))
                  slot.innerHTML += '.arcsec&#8315;&sup2;';
                bright.min = '-40.0';
                bright.max = '40.0';
                bright.step = '0.01';
              } else if (this.value=='fmujy') {
                slot.innerHTML = extended ?
                  'Source flux density [μJy.arcsec&#8315;&sup2;]'
                  : 'Source flux density [μJy]';
                bright.min = '0.0';
                bright.max = '1000.0';
                bright.step = 'any';
              } else if (this.value=='flux') {
                slot.innerHTML = extended ?
                  'Source flux [10<sup>-15</sup> erg.s&#8315;&sup1;.cm&#8315;&sup2;.arcsec&#8315;&sup2;]'
                  : 'Source flux [10<sup>-15</sup> erg.s&#8315;&sup1;.cm&#8315;&sup2;]';
                bright.min = '0.0';
                bright.max = '100000.0';
                bright.step = 'any';
              }
              " name="unit" label="Source unit" label-placement="floating" fill="solid" interface="popover" value="abmag">
              <ion-select-option value="abmag">AB mag</ion-select-option>
              <ion-select-option value="vegamag">Vega mag</ion-select-option>
              <ion-select-option value="fmujy">μJy</ion-select-option>
              <ion-select-option value="flux">flux</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>

      <!--------------------------- photometry ------------------------------->
      <ion-col class="photometry" size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-select onfocus="
              /* Display extra aperture inputs if photometry type is 'aperture' */
              const aperture=document.querySelectorAll('.photometry-aperture');
              if (this.value=='fixed_aperture')
                aperture.forEach(el => el.classList.remove('ion-hide'));
              else
                aperture.forEach(el => el.classList.add('ion-hide'));
              " name="photometry" label="Photometry type" label-placement="floating" fill="solid" interface="popover" value="model_fitting">
              <ion-select-option value="model_fitting">model-fitting</ion-select-option>
              <ion-select-option value="optimal_aperture">optimal aperture</ion-select-option>
              <ion-select-option value="large_aperture">96% flux aperture</ion-select-option>
              <ion-select-option value="fixed_aperture">fixed aperture</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>

      <!----------------------------- aperture ------------------------------->
      <ion-col class="photometry-aperture ion-hide" size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
         <ion-input class="aperture" name="aperture" label="Aperture diameter  [ &quot; ]" label-placement="floating" fill="solid" type="number" inputmode="decimal" min="0.1" max="15.0" step="0.1" value="3.0"></ion-input>
        </ion-item>
      </ion-col>

      <!------------------------------ sky ----------------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-select onfocus="
              /* Display extra sky inputs if the sky type is 'specify' */
              const sky=document.querySelectorAll('.sky-specify');
              if (this.value=='specify')
                sky.forEach(el => el.classList.remove('ion-hide'));
              else
                sky.forEach(el => el.classList.add('ion-hide'));
              " name="sky" label="Sky brightness" label-placement="floating" fill="solid" interface="popover" value="dark">
              <ion-select-option value="dark">dark</ion-select-option>
              <ion-select-option value="grey">grey</ion-select-option>
              <ion-select-option value="bright">bright</ion-select-option>
              <ion-select-option value="specify">specify</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>

      <!--------------------------- sky_brightness --------------------------->
      <ion-col class="sky-specify ion-hide" size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
         <ion-input class="sky-brightness" name="sky_brightness" label-placement="floating" fill="solid" type="number" inputmode="decimal" min="-40.0" max="40.0" step="0.1" value="22.0">
            <div slot="label">Sky value AB mag.arcsec&#8315;&sup2;</div>
         </ion-input>
        </ion-item>
      </ion-col>

      <!----------------------------- sky_unit ------------------------------->
      <ion-col class="sky-specify ion-hide" size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-select onfocus="
              /* Change sky brightness label and limits depending on sky unit */
              const sky=document.querySelector('.sky-brightness');
              if (this.value=='abmag' || this.value=='vegamag') {
                sky.querySelector(`[slot='label']`).innerHTML = this.value=='vegamag' ?
                  'Sky value [Vega mag.arcsec&#8315;&sup2;]'
                  : 'Sky value [AB mag.arcsec&#8315;&sup2;]';
                sky.min = '-40.0';
                sky.max = '40.0';
                sky.step = '0.1';
              } else if (this.value=='fmegajy') {
                sky.querySelector(`[slot='label']`).innerHTML = 'Sky value [MJy.str&#8315;&sup1;]'
                sky.min = '0.0';
                sky.max = '1000.0';
                sky.step = 'any';
              } else if (this.value=='flux') {
                sky.querySelector(`[slot='label']`).innerHTML = 'Sky value [10<sup>-15</sup> erg.s&#8315;&sup1;.cm<&#8315;&sup2;.arcsec&#8315;&sup2;]';
                sky.min = '0.0';
                sky.max = '100000.0';
                sky.step = 'any';
              } else if (this.value=='photons') {
                sky.querySelector(`[slot='label']`).innerHTML = 'Sky value [e&#8315;.s&#8315;&sup1;.px&#8315;&sup1;]'
                sky.min = '0.0';
                sky.max = '1000.0';
                sky.step = 'any';
              }
              " name="sky_unit" label="Sky unit" width="200px" label-placement="floating" fill="solid" interface="popover" value="abmag">
              <ion-select-option value="abmag">AB mag.arcsec&#8315;&sup2;</ion-select-option>
              <ion-select-option value="vegamag">Vega mag.arcsec&#8315;&sup2;</ion-select-option>
              <ion-select-option value="fmegajy">MJy.str&#8315;&sup2;</ion-select-option>
              <ion-select-option value="flux">flux.arcsec&#8315;&sup2;</ion-select-option>
              <ion-select-option value="photons">e&#8315;.s&#8315;&sup1;.px&#8315;&sup1;</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>

      <!---------------------------- airmass --------------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-input name="airmass" label="Airmass" label-placement="floating" fill="solid" type="number" inputmode="decimal" min="1.0" step="0.01" value="1.2"></ion-input>
        </ion-item>
      </ion-col>

      <!-------------------------solar activity ------------------------------>
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-select name="solar" label="Solar activity" label-placement="floating" fill="solid" interface="popover" value="average">
              <ion-select-option value="low">low</ion-select-option>
              <ion-select-option value="average">average</ion-select-option>
              <ion-select-option value="high">high</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>

      <!----------------------------- mirror --------------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-select name="mirror" label="Mirror condition" label-placement="floating" fill="solid" interface="popover" value="average">
              <ion-select-option value="pristine">pristine</ion-select-option>
              <ion-select-option value="average">average</ion-select-option>
              <ion-select-option value="degraded">degraded</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>

      <!--------------------------- transparency ----------------------------->
      <ion-col size-xl="2" size-lg="3" size-md="4" size-sm="6" size-xs="12">
        <ion-item>
          <ion-input name="transparency" label="Transparency" label-placement="floating" fill="solid" type="number" inputmode="decimal" min="0.0" max="1.0" step="0.01" value="1.0"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-item lines="none">
          <ion-button type="submit" fill="solid" size="default" slot="start">
            Submit
          </ion-button>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>
</ion-card-content>
</ion-card>