{# Modal for creation of a resource attached to a compound #}
<div class='modal fade' id='createResourceFromCompoundModal' tabindex='-1' role='dialog' aria-labelledby='createResourceFromCompoundModalTitle'>
  <div class='modal-dialog modal-lg' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='createResourceFromCompoundModalTitle'><i class='fas fa-fw fa-plus'></i> {{ 'Create resource from compound'|trans }}</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='{{ 'Close'|trans }}'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
        <div class='mb-2'>
          <p>{{ 'Select a resource category'|trans }}</p>
          {% for category in resourceCategoriesArr %}
          <a style='color:#{{ category.color }}; border: 1px #ccc solid;' class='btn btn-light mt-1' href='#' data-action='create-resource-from-compound' data-tplid='{{ category.id }}'>
            {% if category.category %}
              <span class='catstat-btn category-btn mr-2' style='--bg: #{{ category.category_color|default('bdbdbd') }}'>{{ category.category_title }}</span>
            {% endif %}
            {{ category.title }}</a>
          {% endfor %}
        </div>
      </div>

      <div class='modal-footer'>
        <button type='button' class='btn btn-ghost' data-dismiss='modal'>{{ 'Cancel'|trans }}</button>
      </div>
    </div>
  </div>
</div>