@extends('layouts.layout_for_article_and_articles')

@section('meta')
  @parent  
  <meta name="description" content="アイリス不動産のブログページです。豊富な経験と専門知識に基づいて、最新の不動産市場の情報、不動産投資の方法、不動産売買のヒントなど様々な情報を定期的に更新してお届けしています。是非、このブログを通して不動産に関する知識を身に付けて下さい。" />
@endsection

@section('canonical')
  <link rel="canonical" href="https://www.iris-real-estate.net/articles">
@endsection

@section('title', 'ブログ (記事一覧) | アイリス不動産')

@section('style')
  @parent
  <link rel="stylesheet" href="{{ mix('css/all_for_articles.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>
  </ol>
@endsection

@section('content_title')
  ブログ
@endsection

@section('main')  
  <h2>
    記事一覧 
    
    @isset($key)
      {{ '(' . $key . ': ' }}
    @endisset

    @isset($value)
      {{ $value . ')' }}
    @endisset
  </h2>
  <div id="articles">
    @foreach ($articles as $article)
      <div class="article">
        <a class="article_link" href="{{ url('/articles', ['id' => $article->id]) }}"></a>
        <img src="{{ asset('storage/articles/' . $article->thumbnail) }}" alt="{{ $article->thumbnail }}" loading="lazy">
        <div class="article_title">
          <b>{{ $article->title }}</b>
        </div>
        <div class="article_category">
          <i class="fa-solid fa-list"></i> 
          @foreach($article->categories as $category)
            {{ $category->name }}
          @endforeach
        </div>
        <div class="article_created_at">
          <i class="fa-solid fa-calendar-days"></i> {{ $article->created_at->format('Y/m/d') }}
        </div>
      </div>
    @endforeach
  </div>

  {{ $articles->appends(request()->input())->onEachSide(1)->links('vendor.pagination.bootstrap-4') }}
@endsection