{% verbatim %}
<section class="cards card-page card-edit widget container-fluid" ng-class="{'praticas-certificadas': card.is_certified, 'praticas-independentes': !card.is_certified}">
    <header class="widget-topbar line one-column">
        <div class="column">
            <div class="pull-left">
                <a class="btn btn-link goback" href="#!/" ng-show="!editing_mode">voltar</a>
                <a class="btn btn-link goback" ng-href="#!/{{ card_id}}" ng-show="editing_mode">voltar</a>
            </div>
            <div class="pull-right">
				<a class="btn btn-sm btn-primary edit" ng-click="create_card()" ng-show="!editing_mode">criar prática</a>
                <a class="btn btn-sm btn-primary edit" ng-click="update_card()" ng-show="editing_mode">salvar prática</a>
                <a class="btn btn-sm btn-danger delete" ng-click="delete_card()" ng-show="editing_mode">apagar prática</a>
            </div>
        </div>
    </header>

    <div class="card-page-content">
        <header class="card-page-header-edit">
            <div>
                <div class="alert alert-danger" role="danger" ng-repeat="error in error_messages">{{ error }}</div>
            </div>
            <form class="cards-filters-options row">
                <div class="form-group col-xs-12 col-md-4 col-lg-3">
                    <label>Público <span class="help-text">(campo obrigatório)</span></label>
                    <select class="form-control" ng-model="card.audience.id" required>
                        <option ng-repeat="audience in audiences track by audience.id" ng-value="audience.id">{{ audience.name }}</option>
                    </select>
                </div>
                <div class="form-group col-xs-12 col-md-4 col-lg-3">
                    <label>Eixo <span class="help-text">(campo obrigatório)</span></label>
                    <select class="form-control" ng-model="card.axis.id" required>
                        <option ng-repeat="axis in axes track by axis.id" ng-value="axis.id">{{ axis.name }}</option>
                    </select>
                </div>
                <div class="form-group col-xs-12 col-md-4 col-lg-6">
                    <label>Tags</label>
					<ui-select multiple theme="bootstrap" ng-model="proxy.tags" tagging="new_tag" title="Selecione uma tag...">
						<ui-select-match placeholder="Selecione uma tag...">#{{ $item.name }}</ui-select-match>
						<ui-select-choices repeat="tag in tags | filter: {name: $select.search}" group-by="">
                            <div ng-if="tag.isTag">
                                <div ng-if="tag_exists($select.search.toLowerCase())" ng-bind-html="tag.name | highlight: $select.search"></div>
                                <div ng-if="!tag_exists($select.search.toLowerCase())" ng-bind-html="(tag.name | highlight: $select.search) +' (nova tag)'"></div>
                            </div>
                            <div ng-if="!tag.isTag" ng-bind-html="tag.name + tag.isTag | highlight: $select.search" ng-hide="$select.search.toLowerCase() == tag.name"></div>
						</ui-select-choices>
					</ui-select>
                </div>
            </form>

            <div class="editable-title col-sm-12 col-lg-9">
                <input type="text" class="title" placeholder="Título (campo obrigatório)" ng-model="card.title" maxlength="60" required>
            </div>

            <p class="tipo-pratica col-sm-12">
                <span ng-show="card.is_certified && !editing_mode">Sua prática será validada.</span>
                <span ng-show="!card.is_certified && !editing_mode">Sua prática será postada.</span>
                <span ng-show="card.is_certified && editing_mode">Sua prática foi validada.</span>
                <span ng-show="!card.is_certified && editing_mode">Sua prática foi postada.</span>
                <span ng-show="card.certifiable"><br/><input type="checkbox" ng-model="card.is_certified" ng-checked="card.is_certified"> Validar prática</span>
            </p>
        </header>

        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-4">
				<div class="editable editable-text-box" ng-bind-html="card.text || 'Clique para editar'" ng-click="text_backup = card.text; show_text_editor = true" ng-show="!show_text_editor"></div>
				<div ng-show="show_text_editor">
					<textarea ui-tinymce ng-model="card.text"></textarea>
                    <div class="btn btn-sm btn-success save" ng-click="show_text_editor = false">Feito</div>
                    <div class="btn btn-sm btn-danger delete" ng-click="card.text = text_backup; show_text_editor = false">Cancelar</div>
				</div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-8">
                <p class="help-text help-gallery text-center"><b>A primeira imagem na galeria abaixo será usada na página inicial do Assim se Faz para divulgar a sua prática.</b></p>
                <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                        <button class="btn" ng-repeat="slide in slides" ng-click="select_media($index)" ng-class="is_selected_media($index)">{{ $index + 1 }}</button>
                        <button class="btn" ng-show="dirty_slide">{{ slides.length + 1 }}</button>
                        <button class="btn btn-success" ng-click="new_slide()" ng-disabled="dirty_slide || slides.length >= 5">+</button>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div ng-show="slide_mode != mode.SHOW_MEDIA">
                                <div class="col-xs-12 text-center" ng-show="slide_mode == mode.ADD_MEDIA">
                                    <button class="btn btn-xs btn-primary add-image" ng-click="slide_mode = mode.ADD_IMAGE">adicionar imagem</button>
                                    <button class="btn btn-xs btn-primary add-video" ng-click="slide_mode = mode.ADD_VIDEO">adicionar vídeo</button>
                                </div>
                                <div class="add-thumbnail col-xs-12 textcenter" ng-show="slide_mode == mode.ADD_IMAGE">
                                    <div class="centered">
                                        <i class="fa fa-picture-o fa-4x"></i>
                                        <h1>Imagem</h1>
                                        <!--<p>(largura mínima: 845px)</p>
                                        <input type="file" ngf-select="" ng-model="image_up" name="file" accept="image/*" ngf-max-size="20MB" required="" ngf-model-invalid="errorFile">-->
                                        <div class="form-group">
                                            <button class="btn btn-sm btn-success add" ngf-select="show_video_form = false; upload_image($file)" ngf-multiple="false" accept="image/*">adicionar</button>
                                            <button class="btn btn-sm btn-danger delete" ng-click="slide_mode = mode.ADD_MEDIA">cancelar</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="add-thumbnail col-xs-12 textcenter" ng-show="slide_mode == mode.ADD_VIDEO">
                                    <div class="centered">
                                        <i class="fa fa-youtube-play fa-4x"></i>
                                        <h1>URL do vídeo</h1>
                                        <div class="form-group">
                                            <input type="text" ng-model="video_url" class="form-control"/>
                                        </div>
                                        <div class="form-group">
                                            <button class="btn btn-sm btn-success add" ng-click="embed_video()">adicionar</button>
                                            <button class="btn btn-sm btn-danger delete" ng-click="slide_mode = mode.ADD_MEDIA; video_url = ''">cancelar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <section class="col-xs-12" ng-show="slide_mode == mode.SHOW_MEDIA">
                                <div ng-show="selected_slide.type == 'image'" class="">
                                    <img ng-src="{{ selected_slide.data.image }}" class="img-responsive">
                                    <button class="btn btn-danger trash" ng-click="remove_media(selected_slide_index)"></button>
                                </div>
                                <div ng-show="selected_slide.type == 'video'">
                                    <iframe width="560" height="315" ng-src="{{safe_url('https://www.youtube.com/embed/' + selected_slide.data.video_id + '?rel=0&amp;showinfo=0')}}" frameborder="0" allowfullscreen></iframe>
                                    <button class="btn btn-danger trash" ng-click="remove_media(selected_slide_index)"></button>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-8">

                <h5 class="subtitle">Você vai precisar de:</h5>
                <div class="editable editable-text-box" ng-bind-html="card.you_will_need || 'Clique para editar'" ng-click="you_will_need_backup = card.you_will_need; show_you_will_need_editor = true" ng-show="!show_you_will_need_editor"></div>
                <div ng-show="show_you_will_need_editor">
                    <textarea ui-tinymce ng-model="card.you_will_need"></textarea>
                    <div class="btn btn-sm btn-success save" ng-click="show_you_will_need_editor = false">Feito</div>
                    <div class="btn btn-sm btn-danger delete" ng-click="card.you_will_need = you_will_need_backup; show_you_will_need_editor = false">Cancelar</div>
                </div>

                <h5 class="subtitle">Desenvolvimento</h5>
                <div class="editable editable-text-box" ng-bind-html="card.development || 'Clique para editar'" ng-click="development_backup = card.development; show_development_editor = true" ng-show="!show_development_editor"></div>
                <div ng-show="show_development_editor">
                    <textarea ui-tinymce ng-model="card.development"></textarea>
                    <div class="btn btn-sm btn-success save" ng-click="show_development_editor = false">Feito</div>
                    <div class="btn btn-sm btn-danger delete" ng-click="card.development = development_backup; show_development_editor = false">Cancelar</div>
                </div>

                <h5 class="subtitle">Para saber mais</h5>
                <div class="editable editable-text-box" ng-bind-html="card.know_more || 'Clique para editar'" ng-click="know_more_backup = card.know_more; show_know_more_editor = true" ng-show="!show_know_more_editor"></div>
                <div ng-show="show_know_more_editor">
                    <textarea ui-tinymce ng-model="card.know_more"></textarea>
                    <div class="btn btn-sm btn-success save" ng-click="show_know_more_editor = false">Feito</div>
                    <div class="btn btn-sm btn-danger delete" ng-click="card.know_more = know_more_backup; show_know_more_editor = false">Cancelar</div>
                </div>

                <h5 class="subtitle">Autoria <div class="btn btn-sm add" ng-click="add_author()">Adicionar pessoa</div></h5>
				<div ng-repeat="author in card.authors">
					<div class="editable-title">
						<input type="text" class="author" placeholder="Nome" ng-model="author.author_name">
					</div>
					<textarea ui-tinymce ng-model="author.author_description"></textarea>
				</div>
            </div>

            <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="sidebar">
                    <div class="box">
                        <h5>Dicas</h5>
                        <div class="editable editable-text-box" ng-bind-html="card.hint || 'Clique para editar'" ng-click="hint_backup = card.hint; show_hint_editor = true" ng-show="!show_hint_editor"></div>
                        <div ng-show="show_hint_editor">
                            <textarea ui-tinymce ng-model="card.hint"></textarea>
                            <div class="btn btn-sm btn-success save" ng-click="show_hint_editor = false">Feito</div>
                            <div class="btn btn-sm btn-danger delete" ng-click="card.hint = hint_backup; show_hint_editor = false">Cancelar</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="widget-bottombar line one-column">
        <div class="column">
            <div class="pull-left">
                <a class="btn btn-link goback" href="#!/" ng-show="!editing_mode">voltar</a>
                <a class="btn btn-link goback" ng-href="#!/{{ card_id}}" ng-show="editing_mode">voltar</a>
            </div>
            <div class="pull-right">
                <a class="btn btn-sm btn-primary edit" ng-click="create_card()" ng-show="!editing_mode">criar prática</a>
                <a class="btn btn-sm btn-primary edit" ng-click="update_card()" ng-show="editing_mode">salvar prática</a>
                <a class="btn btn-sm btn-danger delete" ng-click="delete_card()" ng-show="editing_mode">apagar prática</a>
            </div>
        </div>
    </footer>

</section>
{% endverbatim %}