{% macro progress_bar(percentage) -%}
<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="{{percentage}}"
        aria-valuemin="0" aria-valuemax="100" style="width:{{percentage}}%">{{percentage|round(0)}}%</div>
</div>
{% endmacro %}

{# A boolean where true is "good" and gets colored green; false is colored
red. Note: below, "yes" and "no" are surrounded by special non-breaking space
characters to pad out the boxes a little bit. For some reason &nbsp; is not
parsed. #}

{% macro true_good_boolean(value) -%}
  {% if value %}
  <span class="bg-success"> yes </span>
  {% else %}
  <span class="bg-danger"> no </span>
  {% endif %}
{% endmacro %}

{% macro file_listing(files) -%}
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
	<th>Name</th>
	<th>Created</th>
	<th>Observation</th>
	<th>Type</th>
	<th>Source</th>
	<th>Size</th>
      </tr>
    </thead>
    <tbody>
      {% for f in files %}
      <tr>
	<!-- note: spaces on next line are magic nonbreaking spaces -->
	<td><a href="/stream/{{f.name}}">{{f.name}}</a>   <a href="/files/{{f.name}}">details</a></td>
	<td>{{f.create_time}}</td>
        {% if f.obsid %}
	<td><a href="/observations/{{f.obsid}}">{{f.obsid}}</a></td>
        {% else %}
	<td>null</td>
        {% endif %}
	<td>{{f.type}}</td>
	<td>{{f.source}}</td>
	<td>{{f.size|filesizeformat}}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endmacro %}

{% macro obs_listing(obs) -%}
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
	<th>Obsid</th>
	<th>Start JD</th>
	<th>Start LST (hr)</th>
	<th>Duration (days)</th>
	<th>Total size</th>
      </tr>
    </thead>
    <tbody>
      {% for o in obs %}
      <tr>
	<td><a href="/observations/{{o.obsid}}">{{o.obsid}}</a></td>
	<td>{{o.start_time_jd}}</td>
	<td>{{o.start_lst_hr}}</td>
	<td>{{o.duration}}</td>
	<td>{{o.total_size|filesizeformat}}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endmacro %}

{% macro session_listing_basic(sessions) -%}
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
	<th>Session ID</th>
        <th>Date (UTC)</th>
	<th>Start JD</th>
	<th>Stop JD</th>
	<th>Duration (days)</th>
	<th>Num. Obs.</th>
      </tr>
    </thead>
    <tbody>
      {% for s in sessions %}
      <tr>
	<td><a href="/sessions/{{s.id}}">{{s.id}}</a></td>
        <td>{{s.start_time_calendar_date}}</td>
	<td>{{s.start_time_jd}}</td>
	<td>{{s.stop_time_jd}}</td>
	<td>{{s.duration}}</td>
	<td>{{s.num_obs}}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endmacro %}

{% macro session_listing_detailed(sessions) -%}
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
	<th>Session ID</th>
        <th>Date (UTC)</th>
	<th>Start JD</th>
	<th>Stop JD</th>
	<th>Duration (days)</th>
	<th>Num. Obs.</th>
	<th>Num. Files (with instances)</th>
	<th>Total size</th>
      </tr>
    </thead>
    <tbody>
      {% for s in sessions %}
      <tr>
	<td><a href="/sessions/{{s.id}}">{{s.id}}</a></td>
        <td>{{s.start_time_calendar_date}}</td>
	<td>{{s.start_time_jd}}</td>
	<td>{{s.stop_time_jd}}</td>
	<td>{{s.duration}}</td>
	<td>{{s.num_obs}}</td>
	<td>{{s.num_files}} ({{s.num_files_with_instances}})</td>
	<td>{{s.total_size|filesizeformat}}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endmacro %}

{% macro store_listing(stores) -%}
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
	<th>Name</th>
	<th>SSH Host</th>
	<th>Path Prefix</th>
	<th>HTTP Prefix</th>
	<th>Capacity</th>
	<th>Usage</th>
	<th>Available?</th>
      </tr>
    </thead>
    <tbody>
      {% for s in stores %}
      <tr>
	<td><a href="/stores/{{s.name}}">{{s.name}}</a></td>
	<td><tt>{{s.ssh_host}}</tt></td>
	<td><tt>{{s.path_prefix}}</tt></td>
	<td>
	  {% if s.http_prefix %}
	    <a href="{{s.http_prefix}}">{{s.http_prefix}}</a>
	  {% else %}
	    —
	  {% endif %}
	</td>
	<td>
	  {% if s.available %}
	    {{s.capacity|filesizeformat}}
	  {% else %}
	    ?
	  {% endif %}
	</td>
	<td>
	  {% if s.available %}
	    {{progress_bar(s.usage_percentage)}}
	  {% else %}
	    ?
	  {% endif %}
	</td>
	<td>{{true_good_boolean(s.available)}}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endmacro %}

{% macro staging_form_ui(username_placeholder, dest_path) -%}
<input name="type" type="hidden" value="instances-stores">
<input name="output_format" type="hidden" value="stage-the-files-human">

<div class="form-group row">
  <label for="stage_user" class="col-sm-2 col-form-label">Username:</label>
  <div class="col-sm-4">
    <input type="text" class="form-control"
           name="stage_user" id="stage_user"
	   placeholder="{{username_placeholder}}">
  </div>
</div>

<div class="form-group row">
  <label for="stage_user" class="col-sm-2 col-form-label">Job name (optional):</label>
  <div class="col-sm-4">
    <input type="text" class="form-control"
           name="stage_dest_suffix" id="stage_dest_suffix"
	   placeholder="job name">
  </div>
</div>

<div class="form-group row">
  <label for="dest_dir" class="col-sm-2 col-form-label">Destination directory:</label>
  <div class="col-sm-4">
    <input type="text" class="form-control"
           id="stage_dest_computed"
           readonly
	   value="(enter your username)">
  </div>
</div>

<button type="submit" class="btn btn-primary" name="launch" id="launch" formaction="/search">Launch</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var user_input = document.querySelector('#stage_user');
  var dest_suffix_input = document.querySelector('#stage_dest_suffix');
  var dest_computed = document.querySelector('#stage_dest_computed');
  var launch = document.querySelector('#launch');

  function stage_info_change_handler(event) {
    var username = user_input.value;
    var suffix = dest_suffix_input.value;
    var computed;

    if (username == "") {
      launch.disabled = true;
      computed = "(enter your username)";
    } else {
      launch.disabled = false;
      computed = "{{dest_path}}/" + username;
      if (suffix != "") {
        computed += "/" + suffix;
      }
    }

    dest_computed.value = computed;
  }

  launch.disabled = true;
  user_input.oninput = stage_info_change_handler;
  dest_suffix_input.oninput = stage_info_change_handler;
}, false);
</script>
{% endmacro %}