@extends('layouts.app')
@section('js')
    {{-- <script src="{{ asset('js/video.js') }}"></script> --}}
@endsection
@section('content')
    <div class='row'>
        <div class='col-8 mb-5'>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Articles') }}
            </h2>
        </div>
        <form action='{{route('articles.concepts.create')}}' method='post'>
            @csrf
            <div class="row mt-2 align-items-center">
                <div class="col-6">
                    <textarea rows=10 name="concept" class="form-control" placeholder='Describe the main idea. Avoid special/weird characters'></textarea>
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary">Add</button>
                </div>
            </div>
        </form>
    </div>
    <div class='row mt-5'>
        <div class='col-8 mb-5'>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Concepts
            </h2>
        </div>
    </div>
    @foreach( $articles as $article)
        <div class='row mt-1'>
            <div class='col-1'>
                @if($article->used == 0) 
                    <a href='{{route('articles.concepts.delete', ['id' => $article->id])}}' class='btn btn-default'><i class="fa-solid fa-trash"></i></a>
                @endif
            </div>
            <div class='col-1'>
                @if($article->used == 1)
                    <i class="fa-solid fa-check"></i>
                @else
                    <i class="fa-regular fa-clock"></i>
                @endif
            </div>
            <div class='col-10'>
                {{ strlen($article->concept) > 100 ? substr($article->concept, 0, 100).' ...' : $article->concept}}
            </div>
        </div>
    @endforeach
@endsection