@props(['title', 'img', 'rewards', 'objectives', 'encouragement', 'progress', 'incomplete_objectives'  ])

        <div class="col-md-4 col-sm-6 col-12 achivement-box">
		    <div class="inner-box" @if($progress == 100) style="background: #ececec;" @endif>
		        @if($progress == 100)
		            <div class="completed"><i class="fa fa-check"></i></div>
		        @endif
                <div class="section-title">{{ $title }}</div>
		        <img src="{{ $img }}" alt="{{ $title }}" /><br />


		        <div class="encouragement h">{{ $encouragement }}</div>
		        <div class="progress">
                    <div class="progress-bar" style="width: {{ intval($progress) }}%;" role="progressbar" aria-valuenow="{{ intval($progress) }}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>

                <div class="btn-group btn-group-toggle mt-3 w-100" data-toggle="buttons" style="padding: 0 1px;">
                    <label class="btn btn-outline-primary active">
                        <input type="radio" name="options" id="show-{{$title}}-objectives">
                        Goals
                        @if($incompleteObjectives > 0)
                            <span class="badge badge-danger">
                                {{ $incompleteObjectives }}
                            </span>
                        @endif
                    </label>
                    <label class="btn btn-outline-primary">
                        <input type="radio" name="options" id="show-{{$title}}-rewards" checked>
                        Rewards
                    </label>
                </div>

		        <ul class="list-group" id="{{$title}}-rewards">
		        @foreach($rewards as $reward)
                    <li class="list-group-item active">
                        {{ $reward }}
                    </li>
                @endforeach
		        </ul>

		        <ul class="list-group" id="{{$title}}-objectives">
		        @foreach($objectives as $objective)
                    <li class="list-group-item active">
                    @if($objective['complete'])
                        <i class="fa fa-check mr-1"></i>
                    @endif
                        {{ $objective['name'] }}
                    </li>
                @endforeach
		        </ul>

		    </div>
		</div>