<article class="pricing__wrapper max-w-screen-lg">
    <header>
        <h1 id="pricing">
            flexible pricing options
        </h1>
    </header>
    <section class="pricing__content">
        <div class="level__wrapper level-wrapper--heading">
            <header>
                <h2>

                    <span>

                    </span>
                </h2>
            </header>
            <div class="level__content">
                <div class="level__price-wrapper">
                    <h2 class="level__price">

                    </h2>
                    <span>

                    </span>
                </div>
                <ul>
                    <% systems.forEach((system)=> { %>
                        <li class="">
                            <%= system.name %>
                        </li>
                        <% }) %>
                </ul>
            </div>
            <div></div>
        </div>
        <div class="level__wrapper level-wrapper--trial">
            <header>
                <h2>
                    starter
                    <span>
                        limited
                    </span>
                </h2>
            </header>
            <div class="level__content">
                <div class="level__price-wrapper">
                    <h2 class="level__price" style="align-items: center;">
                        free
                        <span>
                            with paid add-ons
                        </span>
                    </h2>
                </div>
                <ul>
                    <!-- <li>2 systems included</li>
                    <li>purchase advanced systems separately</li> -->
                    <% systems.forEach((system)=> { %>

                        <% if (system.status==='free' ) { %>

                            <li><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="32" height="32" viewBox="0 0 24 24" stroke-width="3" stroke="#00C2FF" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <path d="M5 12l5 5l10 -10" />
                              </svg></li>

                            <% } else if (system.status==='pro' ) { %>

                                <li><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="32" height="32" viewBox="0 0 24 24" stroke-width="3" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <line x1="18" y1="6" x2="6" y2="18" />
                                    <line x1="6" y1="6" x2="18" y2="18" />
                                  </svg><span>(in-app purchase)</span></li>

                                <% } else if (system.status==='soon' ) { %>

                                    <li><span>(coming soon)</span></li>

                                    <% } %>

                                        <% }) %>
                </ul>
            </div>
            <a class="btn btn--level" href="#download">
                download
            </a>
        </div>
        <div class="level__wrapper level__wrapper--monthly level__wrapper--disabled">
            <header>
                <h2>
                    monthly
                    <span>
                        subscription
                    </span>
                </h2>
            </header>
            <div class="level__content">
                <div class="level__price-wrapper">
                    <h2 class="level__price">
                        $9.95
                        <span>
                            paid monthly
                        </span>
                    </h2>
                </div>
                <ul>
                    <% systems.forEach((system)=> { %>

                        <% if (system.status==='pro' || system.status==='free' ) { %>

                            <li><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="32" height="32" viewBox="0 0 24 24" stroke-width="3" stroke="#00C2FF" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <path d="M5 12l5 5l10 -10" />
                              </svg>
                            </li>

                            <% } else if (system.status==='soon' ) { %>

                                <li><span>(coming soon)</span></li>

                                <% } %>

                                    <% }) %>
                </ul>
            </div>
            <a class="btn btn--level btn--disabled">
                coming soon
            </a>
        </div>
        <div class="level__wrapper level__wrapper--yearly level__wrapper--disabled">
            <header>
                <h2>
                    yearly
                    <span>
                        subscription
                    </span>
                </h2>
            </header>
            <div class="level__content">
                <div class="level__price-wrapper">
                    <h2 class="level__price">
                        $3.95
                        <span>
                            paid monthly
                        </span>
                    </h2>
                </div>
                <ul>
                    <% systems.forEach((system)=> { %>

                        <% if (system.status==='pro' || system.status==='free' ) { %>

                            <li><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="32" height="32" viewBox="0 0 24 24" stroke-width="3" stroke="#00C2FF" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <path d="M5 12l5 5l10 -10" />
                              </svg></li>

                            <% } else if (system.status==='soon' ) { %>

                                <li><span class="">(coming soon)</span></li>

                                <% } %>

                                    <% }) %>
                </ul>
            </div>
            <a class="btn btn--level btn--disabled">
                coming soon
            </a>
        </div>
        <div class="level__wrapper level__wrapper--lifetime">
            <header>
                <h2>
                    lifetime
                    <span>
                     full version
                    </span>
                </h2>
            </header>
            <div class="level__content">
                <div class="level__price-wrapper">
                    <h2 class="level__price">
                        $24.95
                        <span>
                            one time fee
                        </span>
                    </h2>
                </div>
                <ul>
                    <% systems.forEach((system)=> { %>

                        <% if (system.status==='pro' || system.status==='free' ) { %>

                            <li><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="32" height="32" viewBox="0 0 24 24" stroke-width="3" stroke="#00C2FF" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <path d="M5 12l5 5l10 -10" />
                              </svg></li>

                            <% } else if (system.status==='soon' ) { %>

                                <li><span>(coming soon)</span></li>

                                <% } %>

                                    <% }) %>
                </ul>
            </div>
            <a class="btn btn--level" href="#download">
                download
            </a>
        </div>
    </section>
</article>