<h3>OctoPrint Wrapped!</h3>

<div data-bind="visible: withinWrappedSeason">
    <div data-bind="visible: currentWrappedAvailable">
        <img data-bind="src.svgtopng: currentSvgUrl()"
             alt="OctoPrint Wrapped sharepic"
             width="400"
             height="400" />
    </div>

    <p data-bind="visible: !currentWrappedAvailable()">
        {% trans %}
        Sadly, there are no stats available to generate your current OctoPrint Wrapped for you.
        OctoPrint Wrapped depends on the stats collection done by the Achievements plugin,
        so if you disabled that, that would explain it. Make sure to enable the Achievements
        plugin if you want to get your OctoPrint Wrapped next time!
    {% endtrans %}
</p>
</div>
<p data-bind="visible: !withinWrappedSeason()">
    {% trans %}
    Nothing to see for this year yet! Come back between December 1st and January 10th!
{% endtrans %}
</p>

<div id="plugin_wrapped_pastyears"
     data-bind="visible: pastYears().length > 0">
    <h4>
        <a href="javascript:void()"
           data-bind="toggleContent: { class: 'fa-caret-right fa-caret-down', parent: '#plugin_wrapped_pastyears', container: '.hide' }"><i class="fas fa-caret-right"></i> {{ _("Past years") }}</a>
    </h4>

    <div class="hide" data-bind="foreach: pastYears">
        <h5 data-bind="text: $data"></h5>
        <img data-bind="src.svgtopng: $root.svgUrlForYear($data)"
             alt="OctoPrint Wrapped sharepic"
             width="400"
             height="400" />
    </div>

</div>
