{% verbatim %}

    <script data-b2c-component-pacote-checkout-sidebar type="text/x-handlebars-template">

        <div data-b2c-pacote-sidebar>
            <div class="subtitulo">
                <div class="alterar">
                    <h3 class="sidebar-titulo" style="flex: 1;">{{ nmPacote }}</h3><i class="fa fa-info" data-toggle="modal" data-target=".modalPacoteDetalheCheckout" style="border: 2px solid var(--azul-1);padding: 3px 7px;border-radius: 24px;color: var(--azul-1);width: 22px;height: 22px;font-size: 12px;cursor:pointer;"></i>
                </div>
            </div>
        </div>

        <div class="modal modalPacoteDetalheCheckout fade-scale" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ nmPacote }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" style="padding-top: 0;">
                        <div class="row conteudo">
                            <div class="col-12 descricao p0">
                                <div class="pacote-detalhe-content">
                                    <ul class="nav nav-tabs tabs-custom" style="border-bottom: 3px solid #ccc;margin-top: 10px;">
                                        <li class="current">
                                            <a rel=".tab-content.pacote" href="javascript:void(0)" class="border-bottom-azul-1" style="cursor: pointer;position: relative;display: block;padding: 10px 15px;color: #555;background-color: #fff;margin-bottom: -3px;">{{__ 'descricao'}}</a>
                                        </li>
                                        {{#notNull pacoteRoteiro }}
                                            <li>
                                                <a rel=".tab-content.roteiro" href="javascript:void(0)" style="cursor: pointer;position: relative;display: block;padding: 10px 15px;color: #555;background-color: #fff;margin-bottom: -3px;">{{__ 'roteiro'}}</a>
                                            </li>
                                        {{/notNull }}
                                    </ul>

                                    <div id="tabs-container-custom">
                                        <div class="tab" style="padding: 15px 15px 0 15px;">
                                            <div id="descricao" class="tab-content pacote">
                                                <p>{{{dsPacote}}}</p>
                                            </div>

                                            {{#notNull pacoteRoteiro }}
                                                <div id="roteiro" class="tab-content roteiro"
                                                     style="display: none;">
                                                    <div style="cursor: initial;">
                                                       <ul class="roteiros" style="border:none;">
                                                            {{#each pacoteRoteiro }}
                                                                <li style="color: #666;">
                                                                    <div>
                                                                        <strong style="margin: 0;font-weight: bold;">
                                                                        {{__ 'sequenciaDia' sqDia }} {{ nmRoteiro }}
                                                                        </strong>
                                                                    </div>
                                                                    {{#each roteiro}}
                                                                        {{ this }}
                                                                    {{/each}}
                                                                </li>
                                                            {{/each }}
                                                        </ul>
                                                    </div>
                                                </div>
                                            {{/notNull }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__ 'fechar'}}</button>
                    </div>
                </div>
            </div>
        </div>

    </script>

{% endverbatim %}