{% extends \"base.html\" %}\n{% load has_user_annotations sass_tags static user_annotation_count wagtailcore_tags readux_extras %}\n\n{% block content %}\n<link type=\"text/css\" href=\"{% sass_src 'css/components/menu-inverse.scss' %}\" rel=\"stylesheet\">\n<link type=\"text/css\" href=\"{% sass_src 'css/components/collection.scss' %}\" rel=\"stylesheet\">\n\n{% include '_home/_nav.html' %}\n\n<div class=\"uk-container\">\n <!-- Breadcrumb -->\n <ul class=\"breadcrumb uk-margin-small-top\">\n <li><a href=\"/\">Home</a></li>\n <li>\n {% if collectionlink %}\n <a href=\"{% pageurl collectionlink %}\">Collections</a>\n {% else %}\n Collections\n {% endif %}\n </li>\n <li>{{ collection.label }}</li>\n </ul>\n <!-- End -->\n </div>\n\n <div class=\"uk-section uk-padding-remove full-width-bg uk-margin-bottom uk-margin-small-top\" style=\"background-image: url('/media/{{collection.header}}');\">\n <div class=\"hero-container\">\n <!-- Left Column: Text Content -->\n <div class=\"hero-text-column\">\n <h1 class=\"collection-title uk-margin-remove uk-text-bold\" id=\"collection-title\">{{ collection.label }}</h1>\n <div class=\"rx-title-tagline uk-margin-small-top\">{{ volumes.paginator.count }} volume{{ volumes.paginator.count|pluralize }}</div>\n {% with summary_plain=collection.summary|striptags|unescape_html summary_html=collection.summary|unescape_html %}\n {% if summary_plain %}\n <div class=\"collection-description uk-margin-top\" id=\"collection-description\">\n {% if summary_plain|length > 300 %}\n <span class=\"description-text\">{{ summary_html|truncatechars_html:300|safe }}</span>\n {% else %}\n <span class=\"description-text\">{{ summary_html|safe }}</span>\n {% endif %}\n </div>\n <button class=\"uk-button description-button uk-text-nowrap\" uk-toggle=\"target: #modal-collection-full\">Full Description</button>\n {% endif %}\n {% endwith %}\n </div>\n\n <!-- Right Column: Collection Image with Info Icon -->\n <div class=\"hero-image-column\">\n <div class=\"hero-image-wrapper\">\n <div class=\"image-placeholder\"></div>\n {% if collection.collection_image_title or collection.collection_image_creator or collection.collection_image_summary %}\n <button\n class=\"info-icon-button\"\n uk-toggle=\"target: #modal-metadata\"\n uk-tooltip=\"title: View image information; pos: right\"\n type=\"button\"\n aria-label=\"View image information\">\n <span uk-icon=\"icon: info; ratio: 1.5\"></span>\n </button>\n {% endif %}\n </div>\n </div>\n </div>\n </div>\n\n {% with summary_plain=collection.summary|striptags %}\n <div id=\"modal-collection-full\" class=\"uk-modal-full uk-modal rx-collection-modal\" uk-modal>\n <div\n class=\"uk-modal-dialog uk-flex uk-flex-center uk-flex-middle modal-bg\"\n uk-height-viewport\n style=\"background-image: url('/media/{{collection.header}}');\"\n >\n <button class=\"uk-modal-close-full uk-close-large\" type=\"button\" uk-close></button>\n <div class=\"modal-overlay\">\n <div class=\"uk-width-1-1 uk-padding-large modal-content\">\n <!-- Description Section -->\n <div class=\"modal-section\">\n <h2 class=\"uk-text-bold\">{{ collection.label }}</h2>\n <div class=\"volume-count\">{{ volumes.paginator.count }} volume{{ volumes.paginator.count|pluralize }}</div>\n <div class=\"modal-description\">\n {{ collection.summary|unescape_html|safe }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n {% endwith %}\n\n {% if collection.collection_image_title or collection.collection_image_creator or collection.collection_image_summary %}\n <div id=\"modal-metadata\" class=\"uk-modal\" uk-modal>\n <div class=\"uk-modal-dialog uk-modal-body uk-margin-auto-vertical\">\n <button class=\"uk-modal-close-default\" type=\"button\" uk-close></button>\n {% if collection.collection_image_title %}\n <p><strong>Title:</strong> {{ collection.collection_image_title|unescape_html }}</p>\n {% endif %}\n {% if collection.collection_image_creator %}\n <p><strong>Creator:</strong> {{ collection.collection_image_creator|unescape_html }}</p>\n {% endif %}\n {% if collection.collection_image_summary %}\n <p><strong>Summary:</strong> {{ collection.collection_image_summary|unescape_html }}</p>\n {% endif %}\n </div>\n </div>\n {% endif %}\n\n <div class=\"uk-container\">\n {% include \"snippets/_volumes_page_information.html\" %}\n {% include \"snippets/_volumes_grid.html\" %}\n {% include \"snippets/_volumes_page_information.html\" %}\n </div>\n\n</div>\n\n{% endblock content %}\n