@extends('app')
@section('title'){{__('main.fuel_unit_title', ['name' => $petroleumPrice->name])}}@endsection
@section('type'){{ 'article' }}@endsection
@section('description'){{__('main.fuel_unit_desc', ['name' => $petroleumPrice->name])}}@endsection
@section('keywords'){{ __('main.fuel_unit_keywprds', ['name' => $petroleumPrice->name]) }}@endsection
@section('css')
<style>
    #petrolPrice, #petrolPrice p {
        text-align: center !important;
    }
    #petrolPrice .type{
        font-size: 25px
    }
    .rate{font-size: 35px}
    .breadcrumb {
        background-color:#132d54; 
    }
    .breadcrumb a {
        font-size: 13px;
        color: #e1ecff;
    }
    .breadcrumb span {
        font-size: 13px;
        color: #e1ecff;
    }
    .breadcrumb img {
      background-color: #FFF;
      border-radius: 5px
    }
    .date{
        font-size: 11px;
    }
</style>
@endsection
@section('content')
<div class="col-xs-12 block" >
    <ul class="breadcrumb">
        <li><a title="{{__('main.home')}}" href="{{LaravelLocalization::localizeUrl('/')}}"><i class="fas fa-home"></i> {{__('main.home')}}</a></li>
        <li><a title="{{__('main.fuel_title')}}" href="{{lurl(route('petrol'))}}"><i class="fas fa-gas-pump"></i> {{__('main.fuel_title_short')}}</a></li>
        <li><span>{!! $petroleumPrice->icon !!} {{__('main.fuel_unit_title', ['name' => $petroleumPrice->name])}}</span></li>
        </ul>
    <h1 class="block-header">
        <span><i class="fas fa-gas-pump"></i> {{__('main.fuel_unit_title', ['name' => $petroleumPrice->name])}}</span>
    </h1>
    <h2 class="block-description text-{{ __('main.align') }}">{{__('main.fuel_unit_desc', ['name' => $petroleumPrice->name])}}</h2>
<div class=" block-content">    
    <style>
        .table-responsive #petroleum-price-today thead
        {
            background-color: #131936;
            color: #FFF;
        }
        @media (min-width: 320px) and (max-width: 480px) 
        {
            .table-responsive #petroleum-price-today thead td
            {
                font-size: 10px;
            }
            .table-responsive #petroleum-price-today tbody td
            {
                font-size: 12px;
            } 
        }
    </style>
        <div id="petrolPrice">
            <span class="type"> 1 {{ __('main.' . $petroleumPrice->unit_type) }} = </span>
            <span class="text-center rate">{{ $petroleumPrice->rate->price }}</span><span>{{ __('main.egCurr') }}</span>
            <p class="change-rate {{$petroleumPrice->rate->change_type}}" dir="ltr">@if($petroleumPrice->rate->change_type == 'up')+@else-@endif{{ $petroleumPrice->rate->change_amount }} @if($petroleumPrice->rate->change_type == 'up')+@else-@endif{{ $petroleumPrice->rate->change_percentage }}%
            </p>
            <span class="date">