{% if flashMessage is not defined %}
        <div class="alert alert-success hidden" id="message" role="alert">
            <div class="container">
                <span id="user_message"></span>
    </div>
</div>      
{% endif %} 

<div id="flash-message" class="flash-message">
{% for flashMessage in app.session.flashbag.get('mensaje') %}
    <div class="alert alert-success" role="alert">
        <div class="container">{{ flashMessage }}</div>
    </div>      
 {% endfor %}



{% for flashMessage in app.session.flashbag.get('mensajemalo') %}
<div class="alert alert-danger" role="alert">
  <div class="container">{{ flashMessage }}</div>
    {% for error in app.session.flashbag.get('listError') %}
        <li><b>{{error}}</b></li>
    {% endfor %}
</div>      
{% endfor %}
</div>
{% for msg in app.flashes('badge') %}
    <div class="modal fade badgeModal" id="myBadgeModal-{{loop.index0}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-body">
                <div class="rm-title">¡Enhorabuena!</div>
                <div class="rm-badge {{msg.badgeClass}}">{{msg.name}}</div>
                <div class="rm-description">{{msg.description}}</div>
                <div class="btn rm-btn-reward"  {% if loop.last == 0 %}onclick="hideModal({{loop.index}});" {% else %}onclick="hideModal();"{% endif %} >+<span id="rm-reward">{{msg.reward}}</span><img src="{{ asset('img/whitestar.png') }}"></div>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{#     {% if loop.first %}
    <div class="modal fade reward col-xs-12" id="myBadgeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="text-align: center; display: none;">
            <div class="modal-dialog modal-sm">
                <div class="modal-content col-xs-12 fm-content-badge">
                    <div class="modal-body col-xs-12">
                        <div class="fm-badge-title col-xs-12" align="center">¡FELICIDADES!</div>
                        <div class="fm-badge-desc col-xs-12" align="center">Has ganado la medalla</div>
                        <div id="lightbox" class="carousel slide" data-ride="carousel">
                         {% set k = loop.length %}
                        <ol class="carousel-indicators">
                            {% for i in range(1, k) %}
                                {% if loop.first %}{% set active = "active" %}{% else %}{% set active = "" %}{% endif %}
                                <li data-target="#lightbox" data-slide-to="{{i}}"  class="{{active}}"></li>  
                            {% endfor %}
                        </ol>
                    <div class="carousel-inner">
    {% endif %}
                    <div class="col-xs-12 {% if loop.first %}active{% endif %} item">
                        <div class="fm-badge-name col-xs-12">
                            {{msg.name}}
                        </div>
                        <div class="fm-badge-img col-xs-12">
                            <img src="{{asset('images/badges/'~msg.img)}}">
                        </div>
                        <div class="fm-badge-rule col-xs-12">
                            {% if msg.rule == 'BEGIN' %}
                                Por iniciar el juego
                            {% elseif msg.rule == 'END' %}
                                Por finalizar el juego
                            {% elseif msg.rule == 'POINTS' %}
                                Por conseguir <b>{{msg.points}}</b> puntos
                            {% endif %}
                        </div>
                        {% if loop.last %}
                            <div class="col-xs-12">
                                <a id="fm-badge" class="btn gametool-btn-green" href="#" style="padding: 5px 35px;margin: 10px 0 5px;">ok, gracias</a>
                            </div>
                        {% else %}
                            <div class="col-xs-12">
                                <a id="fm-badge-next" class="btn gametool-btn-green" href="#lightbox" data-slide="next" style="padding: 5px 35px;margin: 10px 0 5px;">siguiente</a>
                            </div>
                        {% endif %}
                    </div>
    {% if loop.last %}
                        {# <div class="col-xs-12 fm-cont">
                            {{loop.index}}/{{loop.length}}
                        </div> #}
                    {# </di> #}
                    {# <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                    <a class="right carousel-control" href="#lightbox" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> #}
{#                     </div>       
                </div>
            </div>
        </div>
    </div>
    {% endif %} #}