{{-- @inject('carbon', 'Carbon\Carbon') --}}
{{--@inject('FbController', 'App\Modules\Team\Controllers\FacebookController' ) --}}
@extends('Team::dashboard.master')

@section('style')
    <style>
        .video_twitter {
            position: relative;
            display: block;
            width: 100%;
            padding: 0;
            overflow: hidden;
        }

        .video_twitter::before {
            display: block;
            content: "";
        }

        .video_width_full {
            width: 100%;
        }

        .twitter_title {
            font-size: 14px;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 5px;
        }

        .keyword_font {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 0;
            color: #14171a;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Ubuntu, "Helvetica Neue", sans-serif;
        }

        .trending_text {
            margin-bottom: 0;
            color: #616c77;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Ubuntu, "Helvetica Neue", sans-serif;
        }

        .trending_img_post {
            display: flex;
            flex-wrap: nowrap;
        }

        .visited {
            opacity: 0.25
        }

        #media-list li video .media-uploading {
            top: 0;
        }

        .media-uploading > * {
            top: 0 !important;
            height: 100px;
            width: 100px;
            border-radius: 100%;
            border: 3px solid #3b5998;
            animation: rotateThis 10s linear infinite;
        }

        @keyframes rotateThis {
            from {
                transform: rotate(0deg) scale(1);
            }
            to {
                transform: rotate(360deg) scale(1);
            }
        }

        #media-list img {
            display: inline-block;
            vertical-align: top;
            position: relative;
            margin: 0 2%;
        }

        #media-list img {
            transform: translateZ(0);
            margin-bottom: 100px;
        }



        /* twitter like toogle */

        .button-like {
            background-color: transparent;
            text-decoration: none;
            position: relative;
            vertical-align: middle;
            text-align: center;
            display: inline-block;
            border: none;
            color: #8a8a8a;
            transition: all ease 0.4s;
        }

        .button-like span {
            margin-left: 0.5rem;
        }

        .button-like .fa,
        .button-like span {
            transition: all ease 0.4s;
        }

        .button-like:focus {
            background-color: transparent;
        }

        .button-like:focus .fa,
        .button-like:focus span {
            color: #8a8a8a;
        }

        .button-like:hover {
            border-color: #cc4b37;
            background-color: transparent;
        }

        .button-like:hover .fa,
        .button-like:hover span {
            color: #cc4b37;
        }

        .liked .fa,
        .liked span {
            color: #cc4b37;
        }

        .liked:focus {
            background-color: #fff;
        }

        .liked:focus .fa,
        .liked:focus span {
            color: #cc4b37;
        }

        .liked:hover {
            background-color: #fff;
            border-color: #fff;
        }

        .liked:hover .fa,
        .liked:hover span {
            color: #cc4b37;
        }

    </style>
@endsection

@section('title')
    <title>SocioBoard | Twitter Feeds</title>
@endsection

@section('facebookFeed')

    <div class="container margin-top-60">
        <div class="row margin-top-10">
            <div class="col-md-12">
                <h4>Twitter feeds</h4>
            </div>
        </div>

        <div class="row">
            <!-- twt profile-->
            <div class="col-md-4 active_account">
                @include('Team::Twitter.inc_profile')
            </div>

            <div class="col-md-8 margin-bottom-50 fb_feeds_div">
                <div id="fb-root"></div>
                <div class="twt_feeds_div">
                <!-- dynamic content loads here -->
                </div>
            </div>

        </div>
    </div>


    <!-- Successful Comment Modal -->
    <div class="modal fade" id="successCommentModal" tabindex="-1" role="dialog"
         aria-labelledby="successfulModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <i class="fas fa-check-circle fa-5x text-success"></i>
                    <h2 class="mt-3">Yay!</h2>
                    <h5>Your comments was successful!</h5>
                </div>
            </div>
        </div>
    </div>

    <!-- Error Comment Modal -->
    <div class="modal fade" id="errorCommentModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <i class="fas fa-times text-danger fa-5x"></i>
                    <h2 class="mt-3">Oh no!</h2>
                    <h5>Your comments was unsuccessful, please try again.</h5>
                    <button class="btn btn-danger">Try again</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('postModal')
    @include('Team::dashboard.incPostModal')
@endsection


@section('incJS')
    @include('Team::dashboard.incJS')
    @include('Team::dashboard.incTwitterJS')
@endsection