{% macro binaryParam(target, label, code, icon) %}
  <div class='d-flex justify-content-between'>
    <div>
      <label for='addCompound{{ target }}' class='col-form-label'>
      {% if code %}
        <img width='32' height='32' src='assets/images/ghs/GHS{{ code }}.svg' alt='{{ label|trans }}' title='{{ label|trans }}' />
      {% endif %}
      {% if icon %}
        <span title='{{ label|trans }}'>
          <i class='ml-2 mr-1 fas fa-{{ icon }}'></i>
        </span>
      {% endif %}
      {{ label|trans }}</label>
    </div>
    <label class='switch ucp-align'>
      <input name='{{ target }}' type='checkbox' autocomplete='off' id='addCompound{{ target }}'>
      <span class='slider'></span>
    </label>
  </div>
{% endmacro %}

{% macro textParam(target, label, required='', type='', placeholder='', pattern='', title='') %}
  <label for='compoundInput-{{ target }}'>{{ label }}</label>
  <div class='input-group mb-2'>
    <div class='input-group-prepend'>
      <button title='{{ 'Copy to clipboard'|trans }}' class='btn btn-outline-secondary' type='button' data-action='copy-to-clipboard' data-target='compoundInput-{{ target }}'><i class='fas fa-clone'></i></button>
    </div>
    <input name='{{ target }}' {{ type == 'number' ? "type='number' step='0.01'" }} {{ pattern }} {{ title ? "title='#{title}'" }} placeholder='{{ placeholder }}' {{ required }} class='form-control' id='compoundInput-{{ target }}' />
  </div>
{% endmacro %}

{# Modal for manual creation/edition of a compound #}
<div class='modal fade' id='editCompoundModal' tabindex='-1' role='dialog' aria-labelledby='editCompoundModalTitle'>
  <div class='modal-dialog modal-lg' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='editCompoundModalTitle'><i class='fas fa-fw fa-pencil'></i> {{ 'Edit compound'|trans }}</h5>
        {# the clear-form action is repeated on the x icon or it would only work when clicking just next to the x, on the button element #}
        <button type='button' class='close' data-dismiss='modal' data-action='clear-form' data-target='editCompoundInputs' aria-label='{{ 'Close'|trans }}'>
          <span aria-hidden='true' data-action='clear-form' data-target='editCompoundInputs'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
        <div class='d-flex justify-content-between'>
          <button type='button' class='btn btn-secondary btn-sm' data-action='search-resources-from-compound'>{{ 'Search associated resources'|trans }}</button>
          <button type='button' class='btn btn-primary btn-sm ml-auto' data-action='toggle-modal' data-dismiss='modal' data-target='createResourceFromCompoundModal'>{{ 'Create resource from compound'|trans }}</button>
        </div>
        <div class='mb-2' id='editCompoundInputs'>
          {{ _self.textParam('name', 'Name'|trans, 'required') }}
          {{ _self.textParam('iupac_name', 'IUPAC Name'|trans) }}
          {# special case for CAS and EC numbers, too many specifics to use the macro #}
          <label for='compoundInput-cas_number'>{{ 'CAS number'|trans }}</label>
          <div class='input-group mb-2'>
            <div class='input-group-prepend'>
              <button title='{{ 'Copy to clipboard'|trans }}' class='btn btn-outline-secondary' type='button' data-action='copy-to-clipboard' data-target='compoundInput-cas_number'><i class='fas fa-clone'></i></button>
            </div>
            <input name='cas_number' pattern='^\d{2,7}-\d{2}-\d$' title='{{ 'Please enter a valid CAS number (e.g., 58-08-2)'|trans }}' placeholder='58-08-2' class='form-control' id='compoundInput-cas_number' />
          </div>
          <label for='compoundInput-ec_number'>{{ 'EC number'|trans }}</label>
          <div class='input-group mb-2'>
            <div class='input-group-prepend'>
              <button title='{{ 'Copy to clipboard'|trans }}' class='btn btn-outline-secondary' type='button' data-action='copy-to-clipboard' data-target='compoundInput-ec_number'><i class='fas fa-clone'></i></button>
            </div>
            <input name='ec_number' pattern='^\d{1,7}-\d{3}-\d$' title='{{ 'Please enter a valid EC number (e.g., 200-362-1)'|trans }}' placeholder='200-362-1' class='form-control' id='compoundInput-ec_number' />
          </div>
          {{ _self.textParam('molecular_formula', 'Molecular formula'|trans, '', '', 'C8H10N4O2') }}
          {{ _self.textParam('molecular_weight', 'Molecular weight'|trans, '', 'number', '194.19') }}
          {{ _self.textParam('smiles', 'SMILES', '', '', 'CN1C=NC2=C1C(=O)N(C(=O)N2C)C') }}
          {{ _self.textParam('inchi', 'InChI', '', '', 'InChI=1S/C8H10N4O2/c1-10-4-9-6-5(10)7(13)12(3)8(14)11(6)2/h4H,1-3H3') }}
          {{ _self.textParam('inchi_key', 'InChI Key', '', '', 'RYYVLZVUVIJVGH-UHFFFAOYSA-N') }}
          <hr>
          <details>
            <summary><h5 class='d-inline'>{{ 'Safety information'|trans }}</h5></summary>
            {{ _self.binaryParam('is_hazardous2health', 'Hazardous to health', '07') }}
            {{ _self.binaryParam('is_corrosive', 'Corrosive', '05') }}
            {{ _self.binaryParam('is_explosive', 'Explosive', '01') }}
            {{ _self.binaryParam('is_flammable', 'Flammable', '02') }}
            {{ _self.binaryParam('is_gas_under_pressure', 'Gas under pressure', '04') }}
            {{ _self.binaryParam('is_hazardous2env', 'Hazardous to environment', '09') }}
            {{ _self.binaryParam('is_serious_health_hazard', 'Serious health hazard', '08') }}
            {{ _self.binaryParam('is_oxidising', 'Oxidising', '03') }}
            {{ _self.binaryParam('is_toxic', 'Toxic', '06') }}
            {{ _self.binaryParam('is_radioactive', 'Radioactive', '', 'radiation') }}
            {{ _self.binaryParam('is_controlled', 'Controlled substance', '', 'shield') }}
            {{ _self.binaryParam('is_antibiotic_precursor', 'Antibiotic precursor', '', 'bacterium') }}
            {{ _self.binaryParam('is_explosive_precursor', 'Explosive precursor', '', 'explosion') }}
            {{ _self.binaryParam('is_drug_precursor', 'Drug precursor', '', 'pills') }}
            {{ _self.binaryParam('is_cmr', 'Carcinogenic, mutagenic and reprotoxic (CMR)', '', 'skull-crossbones') }}
            {{ _self.binaryParam('is_nano', 'Nanomaterial', '', 'atom') }}
          </details>

          <hr>
          <details>
            <summary><h5 class='d-inline'>{{ 'Immutable information'|trans }}</h5></summary>
            <label for='compoundInput-id'>ID</label>
            <input name='id' class='form-control' id='compoundInput-id' readonly disabled />
            <label for='compoundInput-pubchem_cid'>PubChem CID</label>
            <input name='pubchem_cid' class='form-control' id='compoundInput-pubchem_cid' readonly disabled />
            <label for='compoundInput-userid_human'>{{ 'Owner'|trans }}</label>
            <input name='userid_human' class='form-control' id='compoundInput-userid_human' readonly disabled />
            <label for='compoundInput-team_name'>{{ 'Team'|trans }}</label>
            <input name='team_name' class='form-control' id='compoundInput-team_name' readonly disabled />
          </details>

        </div>
      </div>

      <div class='modal-footer'>
        <button type='button' class='btn btn-ghost' data-dismiss='modal'>{{ 'Cancel'|trans }}</button>
        <button type='button' class='btn btn-primary' id='editCompoundModalSaveBtn' data-action='save-compound'>{{ 'Save'|trans }}</button>
      </div>
    </div>
  </div>
</div>