+ <input type="checkbox" id="modal-newproblem" class="modal"/>
+ <div role="dialog" aria-labelledby="modalProblemTxt">
+ <div v-show="!modalProb.preview" class="card newproblem-form">
+ <label for="modal-newproblem" class="modal-close">
+ </label>
+ <h3 id="modalProblemTxt">{{ translate("Add a problem") }}</h3>
+ <form @submit.prevent="previewProblem()">
+ <fieldset>
+ <label for="newpbFen">FEN</label>
+ <input id="newpbFen" type="text" v-model="modalProb.fen"
+ :placeholder='translate("Full FEN description")'/>
+ </fieldset>
+ <fieldset>
+ <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p>
+ <label for="newpbInstructions">{{ translate("Instructions") }}</label>
+ <textarea id="newpbInstructions" v-model="modalProb.instructions"
+ :placeholder='translate("Describe the problem goal")'>
+ </textarea>
+ <label for="newpbSolution">{{ translate("Solution") }}</label>
+ <textarea id="newpbSolution" v-model="modalProb.solution"
+ :placeholder='translate("How to solve the problem?")'>
+ </textarea>
+ <button class="center-btn">{{ translate("Preview") }}</button>
+ </fieldset>
+ </form>
+ </div>
+ <div v-show="modalProb.preview" class="card newproblem-preview">
+ <label for="modal-newproblem" class="modal-close"
+ @click="modalProb.preview=false">
+ </label>
+ <my-problem-summary :prob="modalProb" :userid="userId" :preview="true">
+ </my-problem-summary>
+ <div class="button-group">
+ <button @click="modalProb.preview=false">{{ translate("Cancel") }}</button>
+ <button @click="sendProblem()">{{ translate("Send") }}</button>
+ </div>
+ </div>
+ </div>
+ <input id="modalNomore" type="checkbox" class="modal"/>
+ <div role="dialog" aria-labelledby="nomoreMessage">
+ <div class="card smallpad small-modal text-center">
+ <label for="modalNomore" class="modal-close"></label>
+ <h3 id="nomoreMessage" class="section">{{ nomoreMessage }}</h3>
+ </div>
+ </div>