{% extends "parent/layout.htm" %}

{% block page_title %}
Report - {{ super() }}
{% endblock %}

{% block head %}
{{ super() }}
<script type="module" src="{{url_for('static', filename='javascript/report.js')}}"></script>
{% endblock %}

{% block hero_title %}Report Missing Format/Conversion{% endblock %}

{% block gui_content %}
{% if service_mode %}
<p>Select the type of report (missing file format or conversion) and then follow the instructions that appear.</p>
<p><b>Finally:</b> click on “Report.”</p>
<p>
  Alternatively, you may wish to see if your needs can be met by
  <a href="https://yard.datatractor.org">Datatractor.</a>
</p><br>
<select id="reason" class="med-width">
  <option value="placeholder">-- select type of report --</option>
  <option value="format">Missing file format</option>
  <option value="conversion">Missing conversion</option>
</select>
<div class="medGap"></div>
<div id="formats" class="init-hidden">
  <p>
    <label for="formatList" id="formatLabel">Check that the format is not present in the list. If it is, consider
      reporting a missing conversion.</label><br>
    <input type="text" placeholder="-- type here to filter options --" id="searchFormats" class="large-width"><br>
    <select size="4" id="formatList" class="large-width"></select>
  </p>
  <input type="button" class="button" value=" Reset " name="resetButton" id="resetButton">
</div>
<div id="missing" class="init-hidden"><br>
  <br>Enter the name of the missing file format including the file extension(s) [max 100 characters].
  <br><input type="text" placeholder="-- type here --" id="missingFormat" class="large-width">
</div>
<div id="in_out_formats" class="init-hidden">
  <br>Select the required “to” and “from” formats below.
  <p>
    <label for="searchFrom" id="fromLabel">Convert from:</label><br>
    <input type="text" placeholder="-- type here to filter options --" id="searchFrom" class="large-width"><br>
    <select size="4" id="fromList" class="large-width"></select>
  </p>
  <div class="smallGap"></div>
  <p>
    <label for="searchTo" id="toLabel">Convert to:</label><br>
    <input type="text" placeholder="-- type here to filter options --" id="searchTo" class="large-width"><br>
    <select size="4" id="toList" class="large-width"></select>
  </p>
  <input type="button" class="button" value=" Reset " name="resetButton2" id="resetButton2">
</div>
<select id="success" class="large-width"></select> <!-- Not for display. For convenience only. -->
<p id="userInput" class="init-hidden">
  <span id="message"></span>
  <br><span id="message1"></span>
  <br><input type="text" placeholder="-- type here --" id="in" class="large-width">
  <br><input type="button" class="button" value=" Report " id="reportButton">
</p>

{% else %}

<div class="smallGap"></div>
<p>
  To report a missing format or conversion, please use
  <a href="https://data-conversion.psdi.ac.uk/report.htm?origin=local">the interface on the public
    web app</a>.
</p>
<p>
  Alternatively, you may wish to see if your needs can be met by
  <a href="https://yard.datatractor.org">Datatractor.</a>
</p>
<div class="medGap"></div>

{%endif %}
{% endblock %}