<div class="pop-over-container via-obstruida-component" ng-class="{'open' : ui.popoverViaObstruidaOpen === true}">

    <button class="btn-base btn-color-featured btn-size-m pop-over-trigger"
        title="Lista de Justificativas - Via Obstruida"
        ng-click="ui.popoverViaObstruidaOpen = !ui.popoverViaObstruidaOpen">
        <i class="icon-warning icon icon-size-m"></i>
    </button>

    <div class="pop-over-content to-left via-obstruida-content">
        <header class="pop-over-header">
            <h3 class="infowindow-header">Lista de Justificativas - Via Obstruida</h3>
            <i class="close icon-close" ng-click="ui.popoverViaObstruidaOpen = 'none'"></i>
        </header>

        <div class="tabs-content-container">
            <div class="tab-content-ocorrencia">
                <div class="pop-over-main justificativas-container">
                    <div class="table-scrollable-wrapper">
                        <div class="table-scrollable-container">
                            <table class="table-scrollable table-justificativas"
                                summary="This is an example of a table">
                                <tbody>
                                    <tr>
                                        <th>
                                            Local
                                            <div class="heading-content">
                                                <span>Local</span>
                                            </div>
                                        </th>
                                        <th>
                                            Rota
                                            <div class="heading-content">
                                                <span>Rota</span>
                                            </div>
                                        </th>
                                        <th>
                                            Trecho
                                            <div class="heading-content">
                                                <span>Trecho</span>
                                            </div>
                                        </th>
                                        <th>
                                            Veículo
                                            <div class="heading-content">
                                                <span>Veículo</span>
                                            </div>
                                        </th>
                                        <th>
                                            Data / Hora
                                            <div class="heading-content">
                                                <span>Data / Hora</span>
                                            </div>
                                        </th>
                                    </tr>
                                    <tr ng-repeat-start="ocorrencia in vm.viaObstruida"
                                        ng-click="vm.selecionarViaObstruidaGrid(ocorrencia)">
                                        <td>
                                            <i class="icon-map-point" ng-class="{'green': ocorrencia.Icone === 'G',
                                                                    'yellow': ocorrencia.Icone === 'Y',
                                                                    'red': ocorrencia.Icone === 'R'}"></i>
                                            {{ocorrencia.Local}}
                                        </td>
                                        <td>{{ocorrencia.Rota}} </td>
                                        <td>{{ocorrencia.Trecho}}</td>
                                        <td>{{ocorrencia.Veiculo}}</td>
                                        <td>{{ocorrencia.DataHora}}</td>
                                    </tr>
                                    <tr ng-repeat-end>
                                        <td colspan="5">
                                            <div class="galeria-via-obstruida">
                                                <a ng-repeat="foto in ocorrencia.Fotos" href="{{foto.Foto}}"
                                                    title="{{foto.Identificador}}" target="_self"
                                                    data-fancybox="via-obstruida-{{ocorrencia.Codigo}}"
                                                    data-caption="{{foto.Identificador}}">
                                                    <img src="{{foto.Foto}}" alt="{{foto.Identificador}}">
                                                </a>
                                            </div>
                                            <span>Observação: {{ocorrencia.Descricao}}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
