<div ng-controller="TaskController">

    <div class="row">
        <div class="col s12">
            <a href="#/tasks" class="breadcrumb"><i class="fa fa-angle-left" style="margin-right:20px"></i> Powrót</a>
            <h1 class="left-align">{{task.name}} <span ng-if="task.completed" class="task-finished-banner">ukończono!</span></h1>
        </div>
    </div>
    <div class="row">
        <div class="col s12 m8">

            <div class="card blue-grey darken-1">
                <div class="card-content white-text">
                    <span class="card-title">
                        <div class="row">
                            <div class="col s1"><i class="fa fa-question"></i></div>
                            <div class="col s11">Opis</div>
                        </div>
                    </span>
                    <p>
                        {{task.description}}
                    </p>
                </div>
            </div>


            <div class="card blue-grey darken-1">
                <div class="card-content white-text">
                    <span class="card-title">
                        <div class="row">
                            <div class="col s1"><i class="fa fa-flag"></i></div>
                            <div class="col s11">Flagi</div>
                        </div>
                    </span>

                    <p ng-if="!task.completedFlags || task.completedFlags.length === 0">
                        Nie dodano żadnych flag.
                    </p>

                    <p ng-if="task.completedFlags && task.completedFlags.length !== 0">
                        <div ng-repeat="flag in task.completedFlags">
                            {{ flag }}
                        </div>
                    </p>

                    <button ng-if="!task.completed" ng-click="submitFlag()" class="btn waves-effect waves-light" type="submit" name="action"
                            style="float:right" ng-if="!submitUnknown">Submit
                        <i class="material-icons right">send</i>
                    </button>

                    <div class="preloader-wrapper small active" style="float:right" ng-if="submitUnknown">
                        <div class="spinner-layer spinner-green-only">
                            <div class="circle-clipper left">
                                <div class="circle"></div>
                            </div>
                            <div class="gap-patch">
                                <div class="circle"></div>
                            </div>
                            <div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                        </div>
                    </div>

                    <div class="input-field" style="overflow:hidden" ng-if="!task.completed">
                        <input placeholder="Wpisz flagę" id="flag-to-submit" type="text" class="validate">
                    </div>

                </div>
            </div>
        </div>
        <div class="col s12 m4" style="text-align:center">
            <img class="responsive-img" src="http://lorempixel.com/400/300/"/>
            <a class="waves-effect waves-light btn" target="_blank" href="{{apiAddress}}/task/{{task.level}}/"
               style="width:100%;margin-top:15px">Otwórz stronę z zadaniem</a>
        </div>
    </div>


</div>