{% extends 'base.html' %}

{% block title %}
<div class='d-flex'>
  <h1 id='pageTitle'>{{ pageTitle }}</h1>
  <a class='ml-auto' href='/api/v2/reports?scope=compounds&format=csv'>
    <button class='btn btn-secondary' data-action='get-compounds-csv'>{{ 'Export to CSV'|trans }}</button>
  </a>
</div>
<hr>
{% endblock title %}

{% block body %}
{# IMPORT FROM PUBCHEM #}
{% include('import-pubchem-modal.html') %}
{% include('create-compound-modal.html') %}
{% include('create-resource-from-compound-modal.html') %}
{% include('edit-compound-modal.html') %}
<p>{{ 'Compounds are chemical entities associated with properties such as a CAS number, a molecular formula, SMILES or InChI representations, hazardous properties, etc... This page allows you to manage your compounds database, which is shared to everyone on the instance. Once created, a compound can be associated with a Resource (or Experiment).'|trans }}</p>
  <div class='my-3'>
    <button type='button' data-action='toggle-modal' data-target='importFromPubChemModal' class='btn btn-primary'>{{ 'Import from PubChem'|trans }}</button>
    <button type='button' data-action='toggle-modal' data-target='createCompoundModal' class='btn btn-secondary'>{{ 'Add compound'|trans }}</button>
  </div>
  <form method='GET' action='/compounds.php'>
  <div class='input-group my-2'>
    <div class='input-group-prepend'>
      <span class='btn btn-light input-border' tabindex='-1'><i class='fas fa-magnifying-glass' aria-hidden='true'></i></span>
    </div>
    <input name='search_fp_smi' value='{{ App.Request.query.get('search_fp_smi') }}' class='form-control' id='substructureSearchInput' placeholder='O=N(=O)C=1C(F)=CC(F)=CC1Br' title='{{ 'Substructure search from SMILES'|trans }}' autocomplete='off' />
    <div class='input-group-append'>
      <button type='submit' data-action='substructure-search' class='btn btn-primary'>{{ 'Search similar compounds'|trans }}</button>
      <div class='input-group-text'>
        <input type='checkbox' name='exact' id='search-fp-exact' {{ App.Request.query.get('exact') == 'on' ? 'checked="checked"' }} aria-label='{{ 'Search exact structure'|trans }}'><span class='ml-1'>{{ 'Exact'|trans }}</span>
      </div>
    </div>
  </div>
  </form>
  <p class='smallgray'>{{ 'Double-click a row in the table below to edit compound.'|trans }}</p>
  <div id='compounds-table'></div>
  <div class='my-2'>
    <button type='button' id='deleteCompoundsBtn' disabled data-action='delete-compounds' class='btn btn-danger btn-sm'>{{ 'Delete selected compounds'|trans }}</button>
  </div>
{% endblock body %}