{% load static %}

{% block customjs %}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const expandableRows = document.querySelectorAll(".expandable-row");
    
        expandableRows.forEach(row => {
            row.addEventListener("click", function () {
                const detailRow = this.nextElementSibling;
    
                if (detailRow && detailRow.classList.contains("detail-row")) {
                    if (detailRow.classList.contains("hidden")) {
                        detailRow.classList.remove("hidden");
                    } else {
                        detailRow.classList.add("hidden");
                    }
                }
            });
        });
    });
</script>
{% endblock %}

<style>
    {% block font %}
        {% if info.fonts %}
                @font-face {font-family: '{{ info.fonts.header.name }}'; src: url({% static info.fonts.header.url %});}
                @font-face {font-family: '{{ info.fonts.content.name }}'; src: url({% static info.fonts.content.url %});}
        {% endif %}
    {% endblock font %}
    
    #release {
        color: #202124;
        letter-spacing: 0.025em;
        max-width: 40rem;
        padding: 3rem 2rem;
        font-size: 0.75rem;
        margin: auto;
        overflow: auto;
        height: 100%;
        font-family: '{{info.fonts.content.name}}';
        
        h1 {font-family: '{{info.fonts.header.name}}'; font-size: xx-large; padding-top: 3rem; margin: 0; font-weight: normal;}
        p {color: #9CA3AF; padding-top: 0.5rem;}
        a {color: #2FA8E1; padding: 0.25rem 0; position: relative;}
        a:hover {background-color: #2FA8E1; color: #2FA8E1; text-decoration: none; cursor: pointer; fill: #2FA8E1;}
        
        table {width: 100%; margin-top: 3rem; font-size: 0.75rem; border-collapse: collapse;}
        tbody {border-bottom: 1px solid rgb(229, 231, 235);}
        tr {cursor: pointer;}
        th {font-family: '{{ info.fonts.header.name }}'; text-align: left; padding: 0.75rem; color: #9CA3AF; letter-spacing: 0.15em; text-transform: uppercase;}
        td {text-align: left; padding: 0.75rem;}

        .expandable-row:hover {cursor: pointer; color: #2FA8E1; user-select: none;}
        .detail-row > td > div {background: #F4F4F4; padding: 0.5rem 0; max-width: 35rem; line-height: 2; white-space: pre-wrap; margin: -1rem 0rem 1rem 0.5rem;}
        .hidden {display: none;}

        .top-bar {padding-bottom: 2rem;}
        .top-bar > a {text-decoration: none; height: 1.5rem; display: flex; align-items: center;}
        .logo {border-bottom: 1px solid rgb(229, 231, 235);}
        .logo img {height: 2.5rem;}

        .blubb {right: 0; top: 50%; z-index: -10; transform: translateY(-50%); transition-duration: 500ms; position: absolute; fill: none;}
        a:hover > span{transform: translateX(60px) translateY(-50%) rotate(360deg); fill: #202124;}
    }
</style>
{% block content %}


<div id="release">
    <div class="top-bar">
        <a href="/">
            <svg style="height: 1rem;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M15 239c-9.4 9.4-9.4 24.6 0 33.9L207 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L65.9 256 241 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L15 239z"/></svg>
        </a>
    </div>

    {% if info.picture_path %}
    <div class="logo">
        <img src="{% static info.picture_path %}" alt="company logo">
    </div>
    {% endif %}

    <h1>Release updates</h1>
    <span>{{info.product_name}}</span>
    <span>by</span>
    <a  href="{{info.author_url}}" target="_blank">{{info.author}}</a>
    {% if info.contact_email %}
        <span>|</span>
        <a  href="mailto:{{ info.contact_email }}">
            {{ info.contact_text|default:info.contact_email }}
            <span class="blubb">
                <svg style="height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M181.5 197.1l12.9 6.4c5.9 3 12.4 4.5 19.1 4.5c23.5 0 42.6-19.1 42.6-42.6l0-21.4c0-35.3-28.7-64-64-64l-64 0c-35.3 0-64 28.7-64 64l0 21.4c0 23.5 19.1 42.6 42.6 42.6c6.6 0 13.1-1.5 19.1-4.5l12.9-6.4 8.4-4.2L135.1 185c-4.5-3-7.1-8-7.1-13.3l0-3.7c0-13.3 10.7-24 24-24l16 0c13.3 0 24 10.7 24 24l0 3.7c0 5.3-2.7 10.3-7.1 13.3l-11.8 7.9 8.4 4.2zm-8.6 49.4L160 240l-12.9 6.4c-12.6 6.3-26.5 9.6-40.5 9.6c-3.6 0-7.1-.2-10.6-.6l0 .6c0 35.3 28.7 64 64 64l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l160 0 0-48 0-16c0-23.7 12.9-44.4 32-55.4c9.4-5.4 20.3-8.6 32-8.6l0-16c0-26.5 21.5-48 48-48c8.8 0 16 7.2 16 16l0 32 0 16 0 48c0 8.8 7.2 16 16 16s16-7.2 16-16l0-99.7c0-48.2-30.8-91-76.6-106.3l-8.5-2.8c-8-2.7-12.6-11.1-10.4-19.3s10.3-13.2 18.6-11.6l19.9 4C576 86.1 640 164.2 640 254.9l0 1.1s0 0 0 0c0 123.7-100.3 224-224 224l-1.1 0L256 480l-.6 0C132 480 32 380 32 256.6l0-.6 0-39.2c-10.1-14.6-16-32.3-16-51.4L16 144l0-1.4C6.7 139.3 0 130.5 0 120c0-13.3 10.7-24 24-24l2.8 0C44.8 58.2 83.3 32 128 32l64 0c44.7 0 83.2 26.2 101.2 64l2.8 0c13.3 0 24 10.7 24 24c0 10.5-6.7 19.3-16 22.6l0 1.4 0 21.4c0 1.4 0 2.8-.1 4.3c12-6.2 25.7-9.6 40.1-9.6l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-13.3 0-24 10.7-24 24l0 8 56.4 0c-15.2 17-24.4 39.4-24.4 64l-32 0c-42.3 0-78.2-27.4-91-65.3c-5.1 .9-10.3 1.3-15.6 1.3c-14.1 0-27.9-3.3-40.5-9.6zM96 128a16 16 0 1 1 0 32 16 16 0 1 1 0-32zm112 16a16 16 0 1 1 32 0 16 16 0 1 1 -32 0z"/></svg>
            </span>
        </a>
    {% endif %}
    {% if version %}
    <p>v{{ version }} released on {{ release_date }}</p>
    {% endif %}

    <div>
        <table>
            <thead>
                <tr>
                    <th>Date</th>
                    <th style="width:30%">Version</th>
                </tr>
            </thead>
            {{ changelog|safe }}
        </table>
   </div>
</div>
{% endblock %}