@extends('layouts.mainlayout')
@section('fullwidth', true)

@section('content')

<div class="smarthr-employees-page smarthr-help-page">
    <header class="smarthr-employees-page-header">
        <div>
            <h1>Help center</h1>
            <p>Video guides for the most frequently used Manpower CRM functions.</p>
        </div>
        <span class="smarthr-employees-count">{{ count($tutorials) }} guides</span>
    </header>

    <div class="smarthr-help-grid">
        @foreach ($tutorials as $tutorial)
            <article class="card smarthr-help-card">
                <header class="smarthr-help-card-header">
                    <span class="smarthr-help-card-icon"><i class="fas {{ $tutorial['icon'] }}"></i></span>
                    <div>
                        <h2>{{ $tutorial['title'] }}</h2>
                        <p>{{ $tutorial['description'] }}</p>
                    </div>
                </header>
                <div class="smarthr-help-video">
                    <video controls preload="metadata">
                        <source src="{{ $tutorial['video'] }}" type="video/mp4">
                        Your browser does not support HTML video.
                    </video>
                </div>
            </article>
        @endforeach
    </div>
</div>
@endsection