<section id="be-your-own">
    <h1>be
        <em>your own</em>
        everything</h1>
    <p>Anything you can do in the permissioned, subscription-based, privacy-invading, insecure model of cloud computing, you
        can also do in the open, free, private, secure model of sovereign computing</p>
    <div id='ticker'>
        <div id="ticker__selected-frame">
            <span>be your own</span>
            {# <div id="services"></div> #}
        </div>
        <div id="ticker__window">
            <ul class='pseudoservices'>
                {% for pseudoservice in pseudoservices %}
                    <li class="pseudoservice">{{ pseudoservice.name }}</li>
                {% endfor %}
            </ul>
        </div>
        <div class="services">
            {% for pseudoservice in pseudoservices %}
            <div class="slides-container slides-container--{{ pseudoservice.name.toLowerCase() }}">
                <ul class="slides-inner">
                    {% for service in services %}
                        {% if pseudoservice.name.toLowerCase() in service.pseudoservices %}
                        <li class="service slide">
                            {# <a href="">{% include "components/svg/chevron-left.svg" %}</a> #}
                            <a class="service__link" href="https://marketplace.start9.com/{{service.slug}}" target="_blank">
                                <img class="service__image" src="../assets/images/service-icons/{{ service.slug }}.png" alt=""/>
                                <div class="service__name">{{ service.name }}</div>
                                {# <div class="service__desc">{{ service.description }}</div> #}
                            </a>
                            {# <a href="">{% include "components/svg/chevron-right.svg" %}</a> #}
                        </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
            <div class="slides-controls">
                <button id="prevButton">{% include "components/svg/chevron-left.svg" %}</button>
                <button id="nextButton">{% include "components/svg/chevron-right.svg" %}</button>
            </div>
        </div>
    </div>
    <a href="https://marketplace.start9.com/" class="btn">browse the start9 marketplace</a>
</section>