@extends('app')
@section('title'){{__('main.allCurrenciesNew')}}@endsection
@section('type'){{ 'article' }}@endsection
@section('description'){{__('main.curenciesDesc')}}@endsection
@section('article')
<meta property="article:tag" content="{{__('main.allCurrenciesNew')}}" />
@endsection
@section('content')
@section('css')
<style>

    .block-description, .block-content{padding: 10px;}
    #currencies-list li > a {
        display: block;
    margin: 10px 0;
    border: 1px solid #DDD;
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 1px 2px #c1c1c1;
}
#currencies-list li > a:hover {
    text-decoration: none;
    color: #FFF;
    background-color: #00284a;
}
#currencies-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
#currencies-list li {
    width: 32.333333%;
    overflow: hidden;
    position: relative;
}
#search-btn{margin: 0 auto;width: 90%}
#search-btn input {    border-radius: 10px;
    height: 50px;
    text-align: center;}

@media (min-width: 320px) and (max-width: 480px) {
    #currencies-list li {
        width: 90%;
    }
    #currencies-list{
        justify-content: center;
    }
    #currencies-list li > a {
        margin: 10px 0 0 0;
    }
    .block-description {
        margin-bottom: 0;
    }
    .block-description {
    font-size: 14px;
    }
    .block-header {
        font-size: 18px;
        text-align: center;
        margin: 0;
    }
}
</style>
@endsection
<div class="col-xs-12 block"  dir="{{__('main.dir')}}">
<ul class="breadcrumb">
        <li><a title="{{__('main.home')}}" href="{{LaravelLocalization::localizeUrl('/')}}"><i class="fas fa-home"></i> {{__('main.home')}}</a></li>
        <li><span><i class="fas fa-university"></i> {{__('main.allCurrenciesNew')}}</span></li>
    </ul>
    <h1 class="block-header">
        {{__('main.allCurrenciesNew')}}
    </h1>
    <p class="block-description">{{__('main.curenciesDesc')}}</p>
    <div class="block-content">
        <div class="row">
          <div class="col-xs-12">
<div id="search-btn">            <input type="text" id="search" placeholder="{{__('main.searchForCurrency')}}" class="form-control">
</div>
            <ul id="currencies-list" dir="{{__('main.dir')}}">
                @foreach( $currencies as $currency )
                <li>
                    <a title="{{$currency->cur_code}} | {{$currency->name}}" href="{{currency_url($currency->toArray())}}">
                        <img width="35" alt="" title="" class="lazy" src="/assets/img/loader.png" data-src="{{$currency->smallflag}}" />
                        {{$currency->cur_code}} | {{$currency->name}}
                    </a>
                </li>
                @endforeach
            </ul>
            </div><!-- end of col-xs-12 -->
        </div>
    </div>
</div>
{{-- @include('includes.show_currencies') --}}
@endsection
@section('js')
<script>
    $( function() {
    $( '#search' ).keyup( function() {
        var matches = $( 'ul#currencies-list' ).find( 'li:contains('+ $( this ).val() +') ' );
        $( 'li', 'ul#currencies-list' ).not( matches ).hide();
        matches.slideDown();    
    });
});
</script>
@endsection