pixelfed/pixelfed

@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row">
        <div class="col-12 py-5 d-flex justify-content-between align-items-center">
            <p class="h1 mb-0"><i class="far fa-circle"></i> Circles</p>
            <p class="mb-0"><a class="btn btn-outline-primary font-weight-bold btn-sm py-1" href="{{route('account.circles.create')}}"><i class="far fa-circle"></i> New</a></p>
        </div>
        <div class="col-12">
            <div class="card">
                    <ul class="list-group list-group-flush">
                        @foreach($circles as $circle)
                        <li class="list-group-item py-3">
                            <div class="row d-flex align-items-center">
                                <div class="col-md-4">
                                    <p class="h1 font-weight-lighter mb-0">{{$circle->name}}</p>
                                </div>
                                <div class="col-md-4 text-center">
                                    @foreach($circle->members()->orderByDesc('created_at')->take(8)->get() as $member)
                                        <a href="{{$member->url()}}"><img src="{{$member->avatarUrl()}}" class="box-shadow rounded-circle ml-n3" width="40px" style="border:3px solid #fff;"></a>
                                    @endforeach
                                </div>
                                <div class="col-md-4 text-right">
                                    <span class="font-weight-lighter mb-0 text-muted pr-3">{{$circle->members->count()}} Members</span>
                                    <a class="btn btn-outline-primary btn-sm py-1 font-weight-bold" href="{{$circle->url()}}">View</a>
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
            </div>
            <div class="d-flex justify-content-center mt-4">
                {{$circles->links()}}
            </div>
        </div>
    </div>
</div>

@endsection