@extends('layouts.layout_for_article_and_articles')

@section('meta')
  @parent
  <meta name="description" content="{{ $article->meta_description }}" />
@endsection

@section('title', $article->title . ' | アイリス不動産')

@section('style')
  @parent
  <link rel="stylesheet" href="{{ mix('css/all_for_article.css') }}">
@endsection

@section('breadcrumb')
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/">
        <span itemprop="name">ホーム</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/articles">
        <span itemprop="name">ブログ</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/articles/{{ $article->id }}">
        <span itemprop="name">{{ $article->title }}</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
@endsection

@section('main')
  <article id="individual_article">
    <h1 id="content_title">{{ $article->title }}</h1>
    <div id="thumbnail_container">
      <img id="thumbnail" src="{{ asset('storage/articles/' . $article->thumbnail) }}" alt="{{ $article->thumbnail }}">
    </div>
    <div>
      <i class="fa-solid fa-tag"></i>
      @foreach($article->categories as $category)
        {{ $category->name }}
      @endforeach
    </div>
    <div>
      <i class="fa-solid fa-pen"></i> {{ $article->created_at->format('Y/m/d') }}
    </div>
    <div>
      {!! $article->content !!}
    </div>
  </article>
@endsection