templates/fossildb.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% block css %}
  3. <link id="bsdp-css" href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet">
  4. <link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify@3.7.3/dist/tagify.css" rel="stylesheet">
  5. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />
  6. <style>
  7. </style>
  8. {% endblock %}
  9. {% block title %}{{ 'Fossielendatabase'|trans }}{% endblock %}
  10. {% block body %}
  11.         <p>&nbsp;</p>
  12.         <div class="row flex-md-row h-md-250 position-relative">
  13.           <div class="col-md-9 position-static">
  14.             <!-- Begin Page Content -->
  15.             <h2>{{ 'Fossielendatabase'|trans }}</h2>
  16.             <p>{{ 'Dit is het Fossielen database.'|trans }}<br>
  17.             {{ 'Wil je fossielen toevoegen aan de Fossielendatabase dat kan op <a href="{link}">deze pagina<a>.'|trans({'{link}' : path('fossildb_add')})|raw }}</p>
  18.             {{ form_start(form) }}
  19.             {{ form_row(form.taxanomy) }}
  20.             {{ form_row(form.location) }}
  21.             {{ form_row(form.era) }}
  22.             <div class="row">
  23.               <div class="col-md-6">
  24.               {{ form_row(form.genus) }}
  25.               </div>
  26.               <div class="col-md-6">
  27.               {{ form_row(form.species) }}
  28.               </div>
  29.             </div>
  30.             <div class="row">
  31.               <div class="col-md-6">
  32.               {{ form_row(form.id) }}
  33.               </div>
  34.               <div class="col-md-6">
  35.               {{ form_row(form.user) }}
  36.               </div>
  37.             </div>
  38.             <p><div class="w100 -right">
  39.               <button class="btn btn-paleontica" type="submit">{% if button_text is defined %}{{button_text}}{% else %}{{ 'Zoeken'|trans }}{% endif %}</button>
  40.             </div>
  41.             </p>
  42.             {{ form_end(form) }}
  43.             <p></p>
  44.             {% if page is empty %}
  45.             <div style="width:100%; height: 3325px; position: relative">
  46.               <a href="/id_system/fossil_id_search.php?cat=41"><picture>
  47.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  48.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  49.                 <img src="/images/default.png" style="position: absolute; clip:rect(0px,574px,51px,0px);">
  50.               </picture></a>
  51.               <a href="/id_system/fossil_id_search.php?cat=42"><picture>
  52.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  53.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  54.                 <img src="/images/default.png" style="position: absolute; clip:rect(51px,574px,116px,0px);">
  55.               </picture></a>
  56.               <a href="/id_system/fossil_id_search.php?cat=43"><picture>
  57.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  58.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  59.                 <img src="/images/default.png" style="position: absolute; clip:rect(116px,574px,175px,0px);">
  60.               </picture></a>
  61.               <a href="/id_system/fossil_id_search.php?cat=44"><picture>
  62.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  63.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  64.                 <img src="/images/default.png" style="position: absolute; clip:rect(175px,574px,235px,0px);">
  65.               </picture></a>
  66.               <a href="/id_system/fossil_id_search.php?cat=11"><picture>
  67.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  68.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  69.                 <img src="/images/default.png" style="position: absolute; clip:rect(235px,574px,275px,0px);">
  70.               </picture></a>
  71.               <a href="/id_system/fossil_id_search.php?cat=45"><picture>
  72.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  73.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  74.                 <img src="/images/default.png" style="position: absolute; clip:rect(275px,574px,315px,0px);">
  75.               </picture></a>
  76.               <a href="/id_system/fossil_id_search.php?cat=46"><picture>
  77.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  78.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  79.                 <img src="/images/default.png" style="position: absolute; clip:rect(315px,574px,380px,0px);">
  80.               </picture></a>
  81.               <a href="/id_system/fossil_id_search.php?cat=32"><picture>
  82.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  83.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  84.                 <img src="/images/default.png" style="position: absolute; clip:rect(380px,574px,425px,0px);">
  85.               </picture></a>
  86.               <a href="/id_system/fossil_id_search.php?cat=13"><picture>
  87.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  88.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  89.                 <img src="/images/default.png" style="position: absolute; clip:rect(425px,574px,485px,0px);">
  90.               </picture></a>
  91.               <a href="/id_system/fossil_id_search.php?cat=48"><picture>
  92.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  93.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  94.                 <img src="/images/default.png" style="position: absolute; clip:rect(485px,574px,540px,0px);">
  95.               </picture></a>
  96.               <a href="/id_system/fossil_id_search.php?cat=47"><picture>
  97.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  98.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  99.                 <img src="/images/default.png" style="position: absolute; clip:rect(540px,574px,605px,0px);">
  100.               </picture></a>
  101.               <a href="/id_system/fossil_id_search.php?cat=48"><picture>
  102.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  103.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  104.                 <img src="/images/default.png" style="position: absolute; clip:rect(605px,574px,658px,0px);">
  105.               </picture></a>
  106.               <a href="/id_system/fossil_id_search.php?cat=39"><picture>
  107.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  108.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  109.                 <img src="/images/default.png" style="position: absolute; clip:rect(658px,574px,720px,0px);">
  110.               </picture></a>
  111.               <a href="/id_system/fossil_id_search.php?cat=10"><picture>
  112.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  113.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  114.                 <img src="/images/default.png" style="position: absolute; clip:rect(720px,574px,765px,0px);">
  115.               </picture></a>
  116.               <a href="/id_system/fossil_id_search.php?cat=49"><picture>
  117.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  118.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  119.                 <img src="/images/default.png" style="position: absolute; clip:rect(765px,574px,818px,0px);">
  120.               </picture></a>
  121.               <a href="/id_system/fossil_id_search.php?cat=50"><picture>
  122.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  123.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  124.                 <img src="/images/default.png" style="position: absolute; clip:rect(818px,574px,873px,0px);">
  125.               </picture></a>
  126.               <a href="/id_system/fossil_id_search.php?cat=51"><picture>
  127.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  128.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  129.                 <img src="/images/default.png" style="position: absolute; clip:rect(873px,574px,895px,0px);">
  130.               </picture></a>
  131.               <a href="/id_system/fossil_id_search.php?cat=52"><picture>
  132.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  133.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  134.                 <img src="/images/default.png" style="position: absolute; clip:rect(895px,574px,928px,0px);">
  135.               </picture></a>
  136.               <a href="/id_system/fossil_id_search.php?cat=53"><picture>
  137.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  138.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  139.                 <img src="/images/default.png" style="position: absolute; clip:rect(928px,574px,973px,0px);">
  140.               </picture></a>
  141.               <a href="/id_system/fossil_id_search.php?cat=35"><picture>
  142.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  143.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  144.                 <img src="/images/default.png" style="position: absolute; clip:rect(973px,574px,997px,0px);">
  145.               </picture></a>
  146.               <a href="/id_system/fossil_id_search.php?cat=37"><picture>
  147.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  148.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  149.                 <img src="/images/default.png" style="position: absolute; clip:rect(997px,574px,1050px,0px);">
  150.               </picture></a>
  151.               <a href="/id_system/fossil_id_search.php?cat=54"><picture>
  152.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  153.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  154.                 <img src="/images/default.png" style="position: absolute; clip:rect(1050px,574px,1090px,0px);">
  155.               </picture></a>
  156.               <a href="/id_system/fossil_id_search.php?cat=55"><picture>
  157.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  158.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  159.                 <img src="/images/default.png" style="position: absolute; clip:rect(1090px,574px,1120px,0px);">
  160.               </picture></a>
  161.               <a href="/id_system/fossil_id_search.php?cat=56"><picture>
  162.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  163.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  164.                 <img src="/images/default.png" style="position: absolute; clip:rect(1120px,574px,1150px,0px);">
  165.               </picture></a>
  166.               <a href="/id_system/fossil_id_search.php?cat=57"><picture>
  167.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  168.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  169.                 <img src="/images/default.png" style="position: absolute; clip:rect(1150px,574px,1200px,0px);">
  170.               </picture></a>
  171.               <a href="/id_system/fossil_id_search.php?cat=17"><picture>
  172.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  173.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  174.                 <img src="/images/default.png" style="position: absolute; clip:rect(1200px,574px,1238px,0px);">
  175.               </picture></a>
  176.               <a href="/id_system/fossil_id_search.php?cat=40"><picture>
  177.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  178.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  179.                 <img src="/images/default.png" style="position: absolute; clip:rect(1238px,574px,1275px,0px);">
  180.               </picture></a>
  181.               <a href="/id_system/fossil_id_search.php?cat=58"><picture>
  182.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  183.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  184.                 <img src="/images/default.png" style="position: absolute; clip:rect(1275px,574px,1315px,0px);">
  185.               </picture></a>
  186.               <a href="/id_system/fossil_id_search.php?cat=59"><picture>
  187.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  188.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  189.                 <img src="/images/default.png" style="position: absolute; clip:rect(1315px,574px,1380px,0px);">
  190.               </picture></a>
  191.               <a href="/id_system/fossil_id_search.php?cat=60"><picture>
  192.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  193.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  194.                 <img src="/images/default.png" style="position: absolute; clip:rect(1380px,574px,1410px,0px);">
  195.               </picture></a>
  196.               <a href="/id_system/fossil_id_search.php?cat=61"><picture>
  197.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  198.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  199.                 <img src="/images/default.png" style="position: absolute; clip:rect(1410px,574px,1440px,0px);">
  200.               </picture></a>
  201.               <a href="/id_system/fossil_id_search.php?cat=62"><picture>
  202.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  203.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  204.                 <img src="/images/default.png" style="position: absolute; clip:rect(1440px,574px,1464px,0px);">
  205.               </picture></a>
  206.               <a href="/id_system/fossil_id_search.php?cat=63"><picture>
  207.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  208.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  209.                 <img src="/images/default.png" style="position: absolute; clip:rect(1464px,574px,1523px,0px);">
  210.               </picture></a>
  211.               <a href="/id_system/fossil_id_search.php?cat=2"><picture>
  212.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  213.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  214.                 <img src="/images/default.png" style="position: absolute; clip:rect(1523px,574px,1581px,0px);">
  215.               </picture></a>
  216.               <a href="/id_system/fossil_id_search.php?cat=38"><picture>
  217.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  218.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  219.                 <img src="/images/default.png" style="position: absolute; clip:rect(1581px,574px,1640px,0px);">
  220.               </picture></a>
  221.               <a href="/id_system/fossil_id_search.php?cat=7"><picture>
  222.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  223.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  224.                 <img src="/images/default.png" style="position: absolute; clip:rect(1640px,574px,1685px,0px);">
  225.               </picture></a>
  226.               <a href="/id_system/fossil_id_search.php?cat=64"><picture>
  227.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  228.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  229.                 <img src="/images/default.png" style="position: absolute; clip:rect(1685px,574px,1720px,0px);">
  230.               </picture></a>
  231.               <a href="/id_system/fossil_id_search.php?cat=6"><picture>
  232.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  233.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  234.                 <img src="/images/default.png" style="position: absolute; clip:rect(1720px,574px,1780px,0px);">
  235.               </picture></a>
  236.               <a href="/id_system/fossil_id_search.php?cat=31"><picture>
  237.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  238.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  239.                 <img src="/images/default.png" style="position: absolute; clip:rect(1780px,574px,1834px,0px);">
  240.               </picture></a>
  241.               <a href="/id_system/fossil_id_search.php?cat=65"><picture>
  242.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  243.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  244.                 <img src="/images/default.png" style="position: absolute; clip:rect(1834px,574px,1888px,0px);">
  245.               </picture></a>
  246.               <a href="/id_system/fossil_id_search.php?cat=66"><picture>
  247.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  248.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  249.                 <img src="/images/default.png" style="position: absolute; clip:rect(1888px,574px,1920px,0px);">
  250.               </picture></a>
  251.               <a href="/id_system/fossil_id_search.php?cat=67"><picture>
  252.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  253.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  254.                 <img src="/images/default.png" style="position: absolute; clip:rect(1920px,574px,1970px,0px);">
  255.               </picture></a>
  256.               <a href="/id_system/fossil_id_search.php?cat=5"><picture>
  257.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  258.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  259.                 <img src="/images/default.png" style="position: absolute; clip:rect(1970px,574px,2020px,0px);">
  260.               </picture></a>
  261.               <a href="/id_system/fossil_id_search.php?cat=30"><picture>
  262.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  263.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  264.                 <img src="/images/default.png" style="position: absolute; clip:rect(2020px,574px,2080px,0px);">
  265.               </picture></a>
  266.               <a href="/id_system/fossil_id_search.php?cat=12"><picture>
  267.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  268.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  269.                 <img src="/images/default.png" style="position: absolute; clip:rect(2080px,574px,2110px,0px);">
  270.               </picture></a>
  271.               <a href="/id_system/fossil_id_search.php?cat=9"><picture>
  272.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  273.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  274.                 <img src="/images/default.png" style="position: absolute; clip:rect(2110px,574px,2146px,0px);">
  275.               </picture></a>
  276.               <a href="/id_system/fossil_id_search.php?cat=68"><picture>
  277.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  278.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  279.                 <img src="/images/default.png" style="position: absolute; clip:rect(2146px,574px,2190px,0px);">
  280.               </picture></a>
  281.               <a href="/id_system/fossil_id_search.php?cat=69"><picture>
  282.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  283.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  284.                 <img src="/images/default.png" style="position: absolute; clip:rect(2190px,574px,2235px,0px);">
  285.               </picture></a>
  286.               <a href="/id_system/fossil_id_search.php?cat=70"><picture>
  287.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  288.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  289.                 <img src="/images/default.png" style="position: absolute; clip:rect(2235px,574px,2280px,0px);">
  290.               </picture></a>
  291.               <a href="/id_system/fossil_id_search.php?cat=8"><picture>
  292.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  293.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  294.                 <img src="/images/default.png" style="position: absolute; clip:rect(2280px,574px,2310px,0px);">
  295.               </picture></a>
  296.               <a href="/id_system/fossil_id_search.php?cat=4"><picture>
  297.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  298.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  299.                 <img src="/images/default.png" style="position: absolute; clip:rect(2310px,574px,2335px,0px);">
  300.               </picture></a>
  301.               <a href="/id_system/fossil_id_search.php?cat=71"><picture>
  302.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  303.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  304.                 <img src="/images/default.png" style="position: absolute; clip:rect(2335px,574px,2380px,0px);">
  305.               </picture></a>
  306.               <a href="/id_system/fossil_id_search.php?cat=34"><picture>
  307.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  308.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  309.                 <img src="/images/default.png" style="position: absolute; clip:rect(2380px,574px,2435px,0px);">
  310.               </picture></a>
  311.               <a href="/id_system/fossil_id_search.php?cat=72"><picture>
  312.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  313.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  314.                 <img src="/images/default.png" style="position: absolute; clip:rect(2435px,574px,2495px,0px);">
  315.               </picture></a>
  316.               <a href="/id_system/fossil_id_search.php?cat=73"><picture>
  317.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  318.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  319.                 <img src="/images/default.png" style="position: absolute; clip:rect(2495px,574px,2540px,0px);">
  320.               </picture></a>
  321.               <a href="/id_system/fossil_id_search.php?cat=74"><picture>
  322.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  323.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  324.                 <img src="/images/default.png" style="position: absolute; clip:rect(2540px,574px,2575px,0px);">
  325.               </picture></a>
  326.               <a href="/id_system/fossil_id_search.php?cat=19"><picture>
  327.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  328.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  329.                 <img src="/images/default.png" style="position: absolute; clip:rect(2575px,574px,2610px,0px);">
  330.               </picture></a>
  331.               <a href="/id_system/fossil_id_search.php?cat=16"><picture>
  332.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  333.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  334.                 <img src="/images/default.png" style="position: absolute; clip:rect(2610px,574px,2650px,0px);">
  335.               </picture></a>
  336.               <a href="/id_system/fossil_id_search.php?cat=14"><picture>
  337.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  338.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  339.                 <img src="/images/default.png" style="position: absolute; clip:rect(2650px,574px,2688px,0px);">
  340.               </picture></a>
  341.               <a href="/id_system/fossil_id_search.php?cat=75"><picture>
  342.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  343.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  344.                 <img src="/images/default.png" style="position: absolute; clip:rect(2688px,574px,2738px,0px);">
  345.               </picture></a>
  346.               <a href="/id_system/fossil_id_search.php?cat=76"><picture>
  347.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  348.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  349.                 <img src="/images/default.png" style="position: absolute; clip:rect(2738px,574px,2778px,0px);">
  350.               </picture></a>
  351.               <a href="/id_system/fossil_id_search.php?cat=21"><picture>
  352.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  353.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  354.                 <img src="/images/default.png" style="position: absolute; clip:rect(2778px,574px,2830px,0px);">
  355.               </picture></a>
  356.               <a href="/id_system/fossil_id_search.php?cat=22"><picture>
  357.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  358.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  359.                 <img src="/images/default.png" style="position: absolute; clip:rect(2830px,574px,2878px,0px);">
  360.               </picture></a>
  361.               <a href="/id_system/fossil_id_search.php?cat=77"><picture>
  362.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  363.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  364.                 <img src="/images/default.png" style="position: absolute; clip:rect(2878px,574px,2930px,0px);">
  365.               </picture></a>
  366.               <a href="/id_system/fossil_id_search.php?cat=23"><picture>
  367.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  368.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  369.                 <img src="/images/default.png" style="position: absolute; clip:rect(2930px,574px,2975px,0px);">
  370.               </picture></a>
  371.               <a href="/id_system/fossil_id_search.php?cat=27"><picture>
  372.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  373.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  374.                 <img src="/images/default.png" style="position: absolute; clip:rect(2975px,574px,3020px,0px);">
  375.               </picture></a>
  376.               <a href="/id_system/fossil_id_search.php?cat=26"><picture>
  377.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  378.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  379.                 <img src="/images/default.png" style="position: absolute; clip:rect(3020px,574px,3071px,0px);">
  380.               </picture></a>
  381.               <a href="/id_system/fossil_id_search.php?cat=28"><picture>
  382.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  383.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  384.                 <img src="/images/default.png" style="position: absolute; clip:rect(3071px,574px,3130px,0px);">
  385.               </picture></a>
  386.               <a href="/id_system/fossil_id_search.php?cat=24"><picture>
  387.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  388.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  389.                 <img src="/images/default.png" style="position: absolute; clip:rect(3130px,574px,3180px,0px);">
  390.               </picture></a>
  391.               <a href="/id_system/fossil_id_search.php?cat=78"><picture>
  392.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  393.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  394.                 <img src="/images/default.png" style="position: absolute; clip:rect(3180px,574px,3230px,0px);">
  395.               </picture></a>
  396.               <a href="/id_system/fossil_id_search.php?cat=3"><picture>
  397.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  398.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  399.                 <img src="/images/default.png" style="position: absolute; clip:rect(3230px,574px,3273px,0px);">
  400.               </picture></a>
  401.               <a href="/id_system/fossil_id_search.php?cat=33"><picture>
  402.                 <source media="(min-width: 576px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}.png">
  403.                 <source media="(max-width: 575px)" srcset="/images/phylogenetictree-{% if app.request.locale == 'nl' %}nl{% else %}en{% endif %}_small.png">
  404.                 <img src="/images/default.png" style="position: absolute; clip:rect(3273px,574px,3325px,0px);">
  405.               </picture></a>
  406.             </div>
  407.             {% else %}
  408.             <div class="row">
  409.               <div class="col-sm-2">
  410.                 {{ result.getTotalItemCount }} {{ 'gevonden'|trans }}.
  411.               </div>
  412.               <div class="col-sm-10 pagnation-paleontica">
  413.                   {{ knp_pagination_render(result) }}
  414.               </div>
  415.             </div>
  416.             {% for item in result %}
  417.               {% include 'fossildb_item.html.twig' with {'item': item} %}
  418.               <p></p>
  419.             {% endfor %}
  420.             <div class="row">
  421.               <div class="col-sm-2">
  422.                 {{ result.getTotalItemCount }} {{ 'gevonden'|trans }}.
  423.               </div>
  424.               <div class="col-sm-10 pagnation-paleontica">
  425.                   {{ knp_pagination_render(result) }}
  426.               </div>
  427.             </div>
  428.             {% endif %}
  429.             <!-- END Page Content -->
  430.           </div>
  431.           {% include 'sidebar.html.twig' %}
  432.         </div>
  433. {% endblock %}
  434. {% block javascript %}
  435.     <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
  436.     <script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
  437.     <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify@3.7.3/dist/tagify.min.js"></script>
  439.     <script>
  440. // START Taxanomy
  441.         var tagify_taxanomy = new Tagify(document.querySelector('input[id="fossildb_search_form_taxanomy"]'), {
  442.             delimiters : null,
  443.             //maxTags : 1,
  444.             templates : {
  445.                 tag : function(v, tagData){
  446.                     try{
  447.                     filename=tagData.filename;
  448.                     name=tagData.value;
  449.                     return `<tag title='${name}' contenteditable='false' spellcheck="false" class='tagify__tag ${tagData.class ? tagData.class : ""}' ${this.getAttributes(tagData)}>
  450.                                 <img onerror="this.style.visibility = 'hidden'" src='/images/icons/fossil/has_${filename}.png' class="jquery_icon_mini">
  451.                                 <x title='remove tag' class='tagify__tag__removeBtn'></x>
  452.                                 <div>${name}</div>
  453.                             </tag>`
  454.                     }
  455.                     catch(err){}
  456.                 },
  458.                 dropdownItem : function(tagData){
  459.                     try{
  460.                       filename=tagData.filename;
  461.                       name=tagData.value;
  462.                       return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
  463.                       <img onerror="this.style.visibility = 'hidden'" src='/images/icons/fossil/has_${filename}.png' class="jquery_icon_resultlist">
  464.                       ${name}</div>`
  465.                     }
  466.                     catch(err){}
  467.                 }
  468.             },
  469.             enforceWhitelist : true,
  470.             whitelist : {{ filter.taxanomy|raw }},
  471.             dropdown : {
  472.                 enabled: 3 // suggest tags after a single character input
  473.             } // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
  474.         }),
  475.             controller; // for aborting the call
  477.         // listen to any keystrokes which modify tagify's input
  478.         tagify_taxanomy.on('input', onInput_taxanomy);
  480.         function onInput_taxanomy( e ){
  481.           var value = e.detail.value;
  482.           tagify_taxanomy.settings.whitelist.length = 0; // reset the whitelist
  484.           // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
  485.           controller && controller.abort();
  486.           controller = new AbortController();
  488.           // show loading animation and hide the suggestions dropdown
  489.           tagify_taxanomy.loading(true).dropdown.hide.call(tagify_taxanomy)
  491.           fetch('{{ path('api_fossildb_taxaonmy') }}/?query=' + value, {signal:controller.signal})
  492.             .then(RES => RES.json())
  493.             .then(function(whitelist){
  494.               // update inwhitelist Array in-place
  495.               tagify_taxanomy.settings.whitelist.splice(0, whitelist.length, ...whitelist)
  496.               tagify_taxanomy.loading(false).dropdown.show.call(tagify_taxanomy, value); // render the suggestions dropdown
  497.             })
  498.         }
  499. // END Taxanomy
  500. // START Location
  501.         var tagify_location = new Tagify(document.querySelector('input[id="fossildb_search_form_location"]'), {
  502.             delimiters : null,
  503.             //maxTags : 1,
  504.             templates : {
  505.                 tag : function(v, tagData){
  506.                     try{
  507.                     return `<tag style="background-color: ${tagData.color}" title='${v}' contenteditable='false' spellcheck="false" class='tagify__tag ${tagData.class ? tagData.class : ""}' ${this.getAttributes(tagData)}>
  508.                                 <x title='remove tag' class='tagify__tag__removeBtn'></x>
  509.                                 <div><img onerror="this.style.visibility = 'hidden'" src='/images/icons/map-pin.png' class="jquery_icon_mini"> ${v}</div>
  510.                             </tag>`
  511.                     }
  512.                     catch(err){}
  513.                 },
  515.                 dropdownItem : function(tagData){
  516.                     try{
  517.                       return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
  518.                       <img onerror="this.style.visibility = 'hidden'" src='/images/icons/map-pin.png' class="jquery_icon_mini"> ${tagData.value}</div>`
  519.                     }
  520.                     catch(err){}
  521.                 }
  522.             },
  523.             enforceWhitelist : true,
  524.             whitelist : {{ filter.location|raw }},
  525.             dropdown : {
  526.                 enabled: 3 // suggest tags after a single character input
  527.             } // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
  528.         }),
  529.             controller; // for aborting the call
  531.         // listen to any keystrokes which modify tagify's input
  532.         tagify_location.on('input', onInput_location);
  534.         function onInput_location( e ){
  535.           var value = e.detail.value;
  536.           tagify_location.settings.whitelist.length = 0; // reset the whitelist
  538.           // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
  539.           controller && controller.abort();
  540.           controller = new AbortController();
  542.           // show loading animation and hide the suggestions dropdown
  543.           tagify_location.loading(true).dropdown.hide.call(tagify_location)
  545.           fetch('{{ path('api_fossildb_location') }}/?query=' + value, {signal:controller.signal})
  546.             .then(RES => RES.json())
  547.             .then(function(whitelist){
  548.               // update inwhitelist Array in-place
  549.               tagify_location.settings.whitelist.splice(0, whitelist.length, ...whitelist)
  550.               tagify_location.loading(false).dropdown.show.call(tagify_location, value); // render the suggestions dropdown
  551.             })
  552.         }
  553. // END Location
  554. // START Era
  555.         var tagify_era = new Tagify(document.querySelector('input[id="fossildb_search_form_era"]'), {
  556.             delimiters : null,
  557.             //maxTags : 1,
  558.             templates : {
  559.                 tag : function(v, tagData){
  560.                     try{
  561.                     return `<tag style="background-color: ${tagData.color}" title='${v}' contenteditable='false' spellcheck="false" class='tagify__tag ${tagData.class ? tagData.class : ""}' ${this.getAttributes(tagData)}>
  562.                                 {#<span class="jquery_icon_mini" style="background-color: ${tagData.color};">&nbsp;&nbsp;&nbsp;</span>#}
  563.                                 <img onerror="this.style.visibility = 'hidden'" src='/images/icons/era/${tagData.name_en.toLowerCase()}.png' class="jquery_icon_mini">
  564.                                 <x title='remove tag' class='tagify__tag__removeBtn'></x>
  565.                                 <div>${v}</div>
  566.                             </tag>`
  567.                     }
  568.                     catch(err){}
  569.                 },
  571.                 dropdownItem : function(tagData){
  572.                     try{
  573.                       return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
  574.                       {#<span class="jquery_icon_resultlist" style="background-color: ${tagData.color};">&nbsp;&nbsp;&nbsp;</span>#}
  575.                       <img onerror="this.style.visibility = 'hidden'" src='/images/icons/era/${tagData.name_en.toLowerCase()}.png' class="jquery_icon_resultlist">
  576.                       ${tagData.value}</div>`
  577.                     }
  578.                     catch(err){}
  579.                 }
  580.             },
  581.             enforceWhitelist : true,
  582.             whitelist : {{ filter.era|raw }},
  583.             dropdown : {
  584.                 enabled: 3 // suggest tags after a single character input
  585.             } // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
  586.         }),
  587.             controller; // for aborting the call
  589.         // listen to any keystrokes which modify tagify's input
  590.         tagify_era.on('input', onInput_era);
  592.         function onInput_era( e ){
  593.           var value = e.detail.value;
  594.           tagify_era.settings.whitelist.length = 0; // reset the whitelist
  596.           // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
  597.           controller && controller.abort();
  598.           controller = new AbortController();
  600.           // show loading animation and hide the suggestions dropdown
  601.           tagify_era.loading(true).dropdown.hide.call(tagify_era)
  603.           fetch('{{ path('api_fossildb_stratigraphyunits', { type: "era" }) }}/?query=' + value, {signal:controller.signal})
  604.             .then(RES => RES.json())
  605.             .then(function(whitelist){
  606.               // update inwhitelist Array in-place
  607.               tagify_era.settings.whitelist.splice(0, whitelist.length, ...whitelist)
  608.               tagify_era.loading(false).dropdown.show.call(tagify_era, value); // render the suggestions dropdown
  609.             })
  610.         }
  611. // END Era
  613. // START Genus
  614.         var tagify_genus = new Tagify(document.querySelector('input[id="fossildb_search_form_genus"]'), {
  615.             delimiters : null,
  616.             //maxTags : 1,
  617.             templates : {
  618.                 tag : function(v, tagData){
  619.                     try{
  620.                     return `<tag title='${v}' contenteditable='false' spellcheck="false" class='tagify__tag ${tagData.class ? tagData.class : ""}' ${this.getAttributes(tagData)}>
  621.                                 <x title='remove tag' class='tagify__tag__removeBtn'></x>
  622.                                 <div>${v}</div>
  623.                             </tag>`
  624.                     }
  625.                     catch(err){}
  626.                 },
  628.                 dropdownItem : function(tagData){
  629.                     try{
  630.                       return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
  631.                       ${tagData.value}</div>`
  632.                     }
  633.                     catch(err){}
  634.                 }
  635.             },
  636.             enforceWhitelist : true,
  637.             whitelist : {{ filter.genus|raw }},
  638.             dropdown : {
  639.                 enabled: 3 // suggest tags after a single character input
  640.             } // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
  641.         }),
  642.             controller; // for aborting the call
  644.         // listen to any keystrokes which modify tagify's input
  645.         tagify_genus.on('input', onInput_genus);
  647.         function onInput_genus( e ){
  648.           var value = e.detail.value;
  649.           tagify_genus.settings.whitelist.length = 0; // reset the whitelist
  651.           // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
  652.           controller && controller.abort();
  653.           controller = new AbortController();
  655.           // show loading animation and hide the suggestions dropdown
  656.           tagify_genus.loading(true).dropdown.hide.call(tagify_genus)
  658.           fetch('{{ path('api_fossildb_genus') }}/?query=' + value, {signal:controller.signal})
  659.             .then(RES => RES.json())
  660.             .then(function(whitelist){
  661.               // update inwhitelist Array in-place
  662.               tagify_genus.settings.whitelist.splice(0, whitelist.length, ...whitelist)
  663.               tagify_genus.loading(false).dropdown.show.call(tagify_genus, value); // render the suggestions dropdown
  664.             })
  665.         }
  666. // END Genus
  668. // START Species
  669.         var tagify_species = new Tagify(document.querySelector('input[id="fossildb_search_form_species"]'), {
  670.             delimiters : null,
  671.             //maxTags : 1,
  672.             templates : {
  673.                 tag : function(v, tagData){
  674.                     try{
  675.                     return `<tag title='${v}' contenteditable='false' spellcheck="false" class='tagify__tag ${tagData.class ? tagData.class : ""}' ${this.getAttributes(tagData)}>
  676.                                 <x title='remove tag' class='tagify__tag__removeBtn'></x>
  677.                                 <div>${v}</div>
  678.                             </tag>`
  679.                     }
  680.                     catch(err){}
  681.                 },
  683.                 dropdownItem : function(tagData){
  684.                     try{
  685.                       return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
  686.                       ${tagData.value}</div>`
  687.                     }
  688.                     catch(err){}
  689.                 }
  690.             },
  691.             enforceWhitelist : true,
  692.             whitelist : {{ filter.species|raw }},
  693.             dropdown : {
  694.                 enabled: 3 // suggest tags after a single character input
  695.             } // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
  696.         }),
  697.             controller; // for aborting the call
  699.         // listen to any keystrokes which modify tagify's input
  700.         tagify_species.on('input', onInput_species);
  702.         function onInput_species( e ){
  703.           var value = e.detail.value;
  704.           tagify_species.settings.whitelist.length = 0; // reset the whitelist
  706.           // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
  707.           controller && controller.abort();
  708.           controller = new AbortController();
  710.           // show loading animation and hide the suggestions dropdown
  711.           tagify_species.loading(true).dropdown.hide.call(tagify_species)
  713.           fetch('{{ path('api_fossildb_species') }}/?query=' + value, {signal:controller.signal})
  714.             .then(RES => RES.json())
  715.             .then(function(whitelist){
  716.               // update inwhitelist Array in-place
  717.               tagify_species.settings.whitelist.splice(0, whitelist.length, ...whitelist)
  718.               tagify_species.loading(false).dropdown.show.call(tagify_species, value); // render the suggestions dropdown
  719.             })
  720.         }
  721. // END Species
  723. // START User
  724.         var tagify_user = new Tagify(document.querySelector('input[id="fossildb_search_form_user"]'), {
  725.             delimiters : null,
  726.             //maxTags : 1,
  727.             templates : {
  728.                 tag : function(v, tagData){
  729.                     try{
  730.                     return `<tag title='${v}' contenteditable='false' spellcheck="false" class='tagify__tag ${tagData.class ? tagData.class : ""}' ${this.getAttributes(tagData)}>
  731.                                 <x title='remove tag' class='tagify__tag__removeBtn'></x>
  732.                                 <div>${v}</div>
  733.                             </tag>`
  734.                     }
  735.                     catch(err){}
  736.                 },
  738.                 dropdownItem : function(tagData){
  739.                     try{
  740.                       return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
  741.                       ${tagData.value}</div>`
  742.                     }
  743.                     catch(err){}
  744.                 }
  745.             },
  746.             enforceWhitelist : true,
  747.             whitelist : {{ filter.user|raw }},
  748.             dropdown : {
  749.                 enabled: 3 // suggest tags after a single character input
  750.             } // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
  751.         }),
  752.             controller; // for aborting the call
  754.         // listen to any keystrokes which modify tagify's input
  755.         tagify_user.on('input', onInput_user);
  757.         function onInput_user( e ){
  758.           var value = e.detail.value;
  759.           tagify_user.settings.whitelist.length = 0; // reset the whitelist
  761.           // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
  762.           controller && controller.abort();
  763.           controller = new AbortController();
  765.           // show loading animation and hide the suggestions dropdown
  766.           tagify_user.loading(true).dropdown.hide.call(tagify_user)
  768.           fetch('{{ path('api_getuser') }}/?query=' + value, {signal:controller.signal})
  769.             .then(RES => RES.json())
  770.             .then(function(whitelist){
  771.               // update inwhitelist Array in-place
  772.               tagify_user.settings.whitelist.splice(0, whitelist.length, ...whitelist)
  773.               tagify_user.loading(false).dropdown.show.call(tagify_user, value); // render the suggestions dropdown
  774.             })
  775.         }
  776. // END User
  778.         jQuery(document).ready(function() {
  779.           $('.js-datepicker').datepicker({
  780.             calendarWeeks: true,
  781.             autoclose: true,
  782.             clearBtn: true,
  783.             todayHighlight: true,
  784.             format: "dd-mm-yyyy",
  785.           });
  787.         $('.js-autocomplete').each(function() {
  788.             var autocompleteUrl = $(this).data('autocomplete-url');
  789.             $(this).autocomplete({hint: false}, [
  790.                 {
  791.                     source: function(query, cb) {
  792.                         $.ajax({
  793.                             url: autocompleteUrl+'?query='+query,
  794.                         }).then(function(data) {
  795.                             cb(data.pages);
  796.                         });
  797.                     },
  798.                     displayKey: 'id',
  799.                     name: 'page',
  800.                     debounce: 500 // only request every 1/2 second
  801.                 }
  802.             ])
  803.         });
  804.       });
  805.     </script>
  806.     <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>
  807.     <script>
  808.     $(document).on('click', '[data-toggle="lightbox"]', function(event) {
  809.         event.preventDefault();
  810.         $(this).ekkoLightbox({
  811.             wrapping: true,
  812.         });
  813.     });
  814.     </script>
  815. {% endblock %}