@extends('layouts.layout')

@section('title', 'Proyectos')

@section('background', asset('img/proyecto.jpg'))

@section('content')
    <div class="container mx-auto px-6 py-5">
        <div class="sec-title text-center mb-5">
            <h2 class="text-gray-900 relative uppercase text-4xl pb-4">Proyecto</h2>
			<p class="py-5">Nuestros Proyectos</p>
        </div>
        <ol class="breadcrumb px-4 py-2 mb-5 bg-gray-200 rounded">
            <li class="inline-block text-blue-dark hover:text-blue-500">
				<a href="{{ route('projects') }}">Proyectos</a>
			</li>
            <li class="inline-block text-sm text-gray-600">Proyecto</li>
        </ol>
        <div class="grid gap-10 grid-cols-1 md:grid-cols-4 py-4">
            <div>
				<img src="{{ asset($project->urlImage) }}" alt="{{ $project->title }}" title="{{ $project->title }}" class="w-full rounded" />
                <iframe src="//www.youtube.com/embed/{{ $project->url_youtube }}" width="100%" height="200" frameborder="0" allowfullscreen class="my-2 rounded"></iframe>
            </div>
            <div class="md:col-span-3">
                <div>
                    <h6 class="text-auto-blue-dark text-xl">{{ $project->title }}</h6>
                </div>
                <div class="text-gray-600 font-semibold text-sm my-2">Cliente: {{ $project->client }}</div>
                {!! $project->description !!}
            </div>
        </div>
    </div>
@endsection