{% extends "layout.html" %}
{% block headers %}
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/utils.js"></script>
{% if enable_projects %}<script src="/static/js/project-settings.js"></script>{% endif %}
<link href="/static/css/jquery.dataTables.min.css" rel="stylesheet">
<style nonce="{{nonce}}">
.number-of-articles { color: #707070; }
.fa-lock { color: #921357; }
.fa-users { color: #139257; }
</style>
<script nonce="{{nonce}}">
jQuery(document).ready(function () {
    jQuery(".hide-for-javascript").removeClass("hide-for-javascript");
    jQuery("#table-unpublished-collections-loader").remove();
    jQuery("#table-published-collections-loader").remove();
    document.querySelectorAll(".delete-draft-collection").forEach(function (element) {
        element.addEventListener("click", function (event) {
            delete_collection (element.id.replace("collection-", ""), event);
        });
    });
    if (typeof render_projects_selector === 'function') {
	render_projects_selector (null);
    }
});
</script>
{% endblock %}
{% block submenu %}
<ul>
  <li><a href="/my/dashboard">My Dashboard</a>
  {% if enable_projects %}<li><form action="#"><select id="project-selector" aria-label="Select project"><option value="all">All projects</option></select></form>{% endif %}
  <li><a href="/my/datasets">My Datasets</a>
  <li class="active corporate-identity-submenu-active">My Collections
  {%- if may_deposit %}<li class="create-button"><a href="/my/collections/new">Create new collection</a>{%- endif %}
</ul>
{% endblock %}
{% block body %}
<noscript>
  <p class="no-script">Sorry, this page requires JavaScript to function properly.</p>
</noscript>
<div class="hide-for-javascript">
<h1>Collections</h1>
{%- if draft_collections %}
<h2>Drafts</h2>
<div id="table-unpublished-collections-loader" class="loader"></div>
<table id="table-unpublished-collections" class="corporate-identity-table">
  <thead>
    <tr>
      <th>Collection</th>
      <th>Created&nbsp;at</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>{% for collection in draft_collections %}
    <tr>
      <td>
        <a href="/my/collections/{{collection.container_uuid}}/edit">{{collection.title}}</a>
        <span class="number-of-articles">({{collection.number_of_datasets | default("0", False)}})</span></td>
      <td>{{collection.created_date | truncate(10,False,'')}}</td>
      <td><a href="/my/collections/{{collection.uuid}}/private_links" class="fas fa-link" title="Private links"></a>{% if not collection.is_public %}&nbsp;<a id="collection-{{collection.container_uuid}}" href="#" class="delete-draft-collection fas fa-trash-can" title="Remove"></a>{% endif %}</td>
    </tr>
  {% endfor %}</tbody>
</table>
{%- elif may_deposit %}
<p>You don&apos;t have any unpublished collections (yet).</p>
<div class="center"><a id="add-new-collection" href="/my/collections/new" class="button corporate-identity-standard-button">Create new collection</a></div>
{%- else %}
<p>You have not been invited to collaborate on a collection (yet).</p>
{%- endif %}
{% if published_collections %}
<h2>Published</h2>
<div id="table-published-collections-loader" class="loader"></div>
<table id="table-published-collections" class="corporate-identity-table">
  <thead>
    <tr>
      <th>Collection</th>
      <th>Published date</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>{% for collection in published_collections %}
    <tr>
      <td>
        <a href="/collections/{{collection.container_uuid}}">{{collection.title}}</a>
        <span class="number-of-articles">({{collection.number_of_datasets | default("0", False)}})</span></td>
      <td>{{collection.published_date | truncate(10,False,'')}}</td>
      <td>{% if not collection.has_draft %}<a href="/my/collections/{{collection.container_uuid}}/new-version-draft" class="fas fa-plus" title="Add new version"></a>{% endif %}<a href="/my/collections/{{collection.uuid}}/private_links" class="fas fa-link" title="Private links"></a></td>
    </tr>
  {% endfor %}</tbody>
</table>
{% endif %}
</div>
{% endblock %}