@extends('layout.master')



@section('title','Yazarlar - '.config('settings.site_title', 'Varsayılan Başlık'))
@section('description','Sitemiz\'de yer alan köşe yazarları, yazarların son köşe yazıları,haber sitemizde.')



@section('content')
<div class="container-page-custom"  id="site-content">
     
        <div class="col-md-12">
    
     <div class="container Category">
          <div class="container mt-5">
        <div class="section-header authors-title">
            <h2 style="margin: 0 auto;font-size: 33px;">Yazarlar</h2>
        </div>
        <div class="col-12 article-footer"> </div>
    </div>

        <div class="row" style="padding: 20px 50px;">
            @foreach($authors as $author)
             @if(isset($author->lastNews))
             <div class="col-md-6">
                  <div class="custom-card ">
                    <a href="yazar/{{$author->slug}}" title="{{$author->name}}"><img src="@if(isset($author->image)) /uploads/images/{{$author->image}} @else https://via.placeholder.com/100 @endif" alt="{{$author->name}}" width="100" height="100"></a>
                    <div class="details">
                         <a href="yazar/{{$author->slug}}" title="{{$author->name}}"><h5>{{$author->name}}</h5>
                        <p class="authorNews">{{ $author->lastNews->name ?? '' }}</p>
                        <p class="email">{{$author->mail}}</p></a>
                    </div>
                 
                </div>
            </div>
                    @endif
               @endforeach
            
        
        </div>
 
  
    </div>
 

    <div class="container categoriesthree">
        <div class="row">
        <div class="col-md-4 categorione">
             <div class="section-header">
            <h2 style="font-size: 15px;">GÜNCEL</h2>
            <div class="line" style="background-color:#b60707;height: 4px;"></div>
        </div>
            <div class="container mt-3">
                <!-- Main news card -->
                  @foreach($guncelhaberlerSlider as $guncelhaberSlider)
                 <div class="news-card">
                    <a href="/haber/{{$guncelhaberSlider->slug}}" title="{{$guncelhaberSlider->name}}"><img src="{{ $guncelhaberSlider->news_image }}" alt="{{$guncelhaberSlider->name}}"></a>
                    <div class="news-badge"style="background-color:#{{$guncelhaberSlider->category->color}} !important;">{{$guncelhaberSlider->category->name}}</div>
                    <div class="card-body">
                        <h5 class="card-title">  <a href="/{{$guncelhaberSlider->slug}}.html"  title="{{$guncelhaberSlider->name}}"><div class="news-title">{{$guncelhaberSlider->name}}</div></a></h5></div>
                </div>
                @endforeach
                    
                 @foreach($guncelhaberlerNews as $guncelhaberlerNew)
                <div class="news-card-mini">
                    <a href="/{{$guncelhaberlerNew->slug}}.html" class="news-link-mini" title="{{$guncelhaberlerNew->name}}">
                        <span class="news-icon-mini">&#8250;</span>
                        <span class="news-description-mini">{{$guncelhaberlerNew->name}}</span>
                    </a>
                </div>
                 @endforeach
                
            </div>
        </div>

         <div class="col-md-4 categorione">
             <div class="section-header">
            <h2 style="font-size: 15px;">BURSA</h2>
            <div class="line" style="background-color:#0400ff;height: 4px;"></div>
        </div>
         <div class="container mt-3">
                <!-- Main news card -->
                  @foreach($bursahaberlerSlider as $bursahaberSlider)
                 <div class="news-card">
                    <a href="/haber/{{$bursahaberSlider->slug}}" title="{{$bursahaberSlider->name}}"><img src="{{ $bursahaberSlider->news_image }}" alt="{{$bursahaberSlider->name}}"></a>
                    <div class="news-badge"style="background-color:#{{$bursahaberSlider->category->color}} !important;">{{$bursahaberSlider->category->name}}</div>
                    <div class="card-body">
                        <h5 class="card-title">  <a href="/haber/{{$bursahaberSlider->slug}}"  title="{{$bursahaberSlider->name}}"><div class="news-title">{{$bursahaberSlider->name}}</div></a></h5></div>
                </div>
                @endforeach
                    
                 @foreach($bursahaberlerNews as $bursahaberlerNew)
                <div class="news-card-mini">
                    <a href="/haber/{{$bursahaberlerNew->slug}}" class="news-link-mini" title="{{$bursahaberlerNew->name}}">
                        <span class="news-icon-mini">&#8250;</span>
                        <span class="news-description-mini">{{$bursahaberlerNew->name}}</span>
                    </a>
                </div>
                 @endforeach
                
            </div>
        </div>

         <div class="col-md-4 categorione">
             <div class="section-header">
            <h2 style="font-size: 15px;">EKONOMİ</h2>
            <div class="line" style="background-color:#FF8C04;height: 4px;"></div>
        </div>
      <div class="container mt-3">
                <!-- Main news card -->
                  @foreach($ekonomikhaberlerSlider as $ekonomikhaberSlider)
                 <div class="news-card">
                    <a href="/haber/{{$ekonomikhaberSlider->slug}}" title="{{$ekonomikhaberSlider->name}}"><img src="{{ $ekonomikhaberSlider->news_image }}" alt="{{$ekonomikhaberSlider->name}}"></a>
                    <div class="news-badge"style="background-color:#{{$ekonomikhaberSlider->category->color}} !important;">{{$ekonomikhaberSlider->category->name}}</div>
                    <div class="card-body">
                        <h5 class="card-title">  <a href="/haber/{{$ekonomikhaberSlider->slug}}"  title="{{$ekonomikhaberSlider->name}}"><div class="news-title">{{$ekonomikhaberSlider->name}}</div></a></h5></div>
                </div>
                @endforeach
                    
                 @foreach($ekonomikhaberlerNews as $ekonomikhaberNews)
                <div class="news-card-mini">
                    <a href="/haber/{{$ekonomikhaberNews->slug}}" class="news-link-mini" title="{{$ekonomikhaberNews->name}}">
                        <span class="news-icon-mini">&#8250;</span>
                        <span class="news-description-mini">{{$ekonomikhaberNews->name}}</span>
                    </a>
                </div>
                 @endforeach
                
            </div>
        </div>
    </div>
    </div>


 </div>
              
    </div>
</div>


 <style>
        .custom-card {
            background-color: #e0e0e0;
            padding: 20px 20px 20px 8px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            margin-top:10px;
            position: relative;
        }
        .custom-card img {
            border-radius: 50%;
            margin-right: 20px;
        }
        .custom-card .details {
            flex-grow: 1;
        }
        .custom-card .details h5 {
            color: red;
            font-size: 20px;
                        font-weight: 600;

        }
        .custom-card .details p {
            margin: 0;
            font-size: 15px;
            color: #333;
         
        }
        .custom-card .details .authorNews{
               font-weight: 600;
        }
        .custom-card .date p{
            font-size:16px;
        }
        .custom-card .details .email {
            color: gray;
        }
        .custom-card .date {
              text-align: right;
    color: gray;
    position: absolute;
    bottom: -14px;
    right: 4px;
        }
        .categoriesthree{
            background-color: #fff;
            border-radius: 10px;
        }
           .news-card-mini {
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 10px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }
        .news-card-mini a{
                display: flex;
        }
        .news-card-mini img {
            width: 100%;
            height: auto;
            border-radius: 5px;
        }
        .news-title-mini {
            font-weight: bold;
            font-size: 1.2rem;
            color: #333;
        }
        .news-link-mini {
            text-decoration: none;
            color: #333;

        }
        .news-link:hover-mini {
            text-decoration: none;
        }
        .news-description-mini {
                font-size: 15px;
    color: #363F50;
    font-weight: 500;
       word-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 22px;
    margin-left: 10px;
    margin-top: 5px;
        }
        .news-icon-mini {
               color: #CBCBCB;
    font-size: 20px;
    font-weight: 600;
        }
        .categorione{
            padding: 20px;
        }
        .CategoryImage{
                height: 225px;
                width: 100%;
                object-fit: cover;
                    }

                    .news-card{
                      padding-bottom: 0px;
    border: 0;
}  
.news-card img{
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.card-body{
    background: #EAECF3;
    height: 60px;
}

.news-title{
  -webkit-line-clamp: 1;
}

.custom-card a{
    text-decoration: none;
}


    </style>
@endsection

