@include('template.header')
<div class="page-heading">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Card Gallery</h1>
            </div>
        </div>
    </div>
</div>
<div class="nav-section background background-light-grey">
    <ul class="sort-nav">
        <li><a href="{{url('card-gallery/govt')}}">Government</a></li>
        <li><a href="{{url('card-gallery/financial')}}">Financial</a></li>
        <li><a href="{{url('card-gallery/healthcare')}}">Healthcare</a></li>
        <li><a href="{{url('card-gallery/loyalty')}}">Loyalty</a></li>
        <li><a href="{{url('card-gallery/membership')}}">Membership</a></li>
        <li><a href="{{url('card-gallery/insurance')}}">Insurance</a></li>
        <li><a href="{{url('card-gallery/keycard')}}">Key Card</a></li>
    </ul>
</div>
<div class="container margin margin-top-25 margin-bottom-70">
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-warning browser-alert">
                You are currently using old browser, Please update your browser for better user expirence.
            </div>
        </div>
    </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div style="margin-top:100px;" class="background semi-transparent-dark padding padding-all-20">
                <div class="card-cont">
                    @if(!empty($cards))
                    @foreach($cards as $card)
                    <!-- Flip Card Start -->
                        <div class="item cover flip-card {{MY_Helpers::get_card_type($card)}} {{MY_Helpers::get_card_category($card)}}">
                            <div class="card">
                                <div class="front">
                                    <img src="{{MY_Helpers::get_card_front($card)}}"/>
                                </div>
                            <!--    <div class="back">
                                    <img src="{{MY_Helpers::get_card_back($card)}}"/>
                                </div>
                                -->
                            </div>
                        </div>
                    <!-- Flip Card End -->
                    @endforeach
                    @else
                    <p>No Cards Available.</p>
                    @endif

                </div>
        
            </div>
        </div>
    </div>
</div>
</div>
@include('template.footer')
<!-- Add fancyBox main JS and CSS files -->