<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<div class="page" data-name="chooseteam">

    <div class="navbar">
        <div class="navbar-inner">
            <div class="title">Choose a Type</div>
        </div>
    </div>


    <div class="page-content">

        <div class="block">
            <p class="text-align-center">
                Your type will affect your strengths, weaknesses, and abilities.  Choose wisely.
            </p>
            <div class="row" style="justify-content: center;">
                {{#each teams}}
                <div class="col-50 tablet-33 desktop-15">
                    <div class="card type-card color-theme-{{color}} bg-color-{{color}} text-color-{{textcolor}}" data-id="{{id}}">
                        <div class="card-content card-content-padding text-align-center">
                            <i class="{{icon}} fa-3x margin-top"></i><br />
                            <h2>{{name}}</h2>
                        </div>
                    </div>
                </div>
                {{/each}}
            </div>

        </div>

    </div>

    <script src="js/chooseteam.js"></script>

</div>