{# the city-card changes the color using css #}
        
{% macro city_block(list) %}
         {% if list %}       
            {% for item in list %}
            {% if item.get('visible') %}
            <div class="cities col-lg-3 col-md-4 col-sm-6 mb-4">
               <div class="card text-center{% if item.get('coming_soon') %}{% else %} city-card{% endif %}">
                   <div class="card-body">
                       <h2 class="card-title"><strong>{{item.get('city')}}{% if item.get('state') %}, {{item.get('state').upper() }}{% endif %}</strong></h2>
                       {% if item.get('coming_soon') %}
                       <button disabled class="btn btn-light mt-2 btn-soon">Coming Soon</button>
                       {% else %}
                        <a href="{{ url_for('chapter_landing', chapter=item.get('handle')) }}" class="btn btn-light mt-2 btn-city">Enter</a>
                       {% endif %}
                   </div>
               </div>
           </div>
           {% endif %}
            {% endfor %}
         {% endif %}
{% endmacro %}


{% macro block(title, link, button_text, color) %}
        <div class="cities col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card text-center {% if color =='red' %}form-card{% endif %}">
                <div class="card-body">
                    <h2 class="card-title"><strong>{{title}}</strong></h2>
                    <a href="{{link}}" target="_blank" class="btn btn-light mt-2">{{button_text}}</a>
                </div>
            </div>
        </div>
{% endmacro %}