<div class="uk-section esm-panel" id="rpt-parser" v-cloak>
    <div class="uk-container">    
        <div class="uk-align-center">
            <h1 class="uk-heading-line"><span>RPT Parser</span></h1>
            <p><small>
                Please note: This application is in beta, not every error will be caught. If you do find an error that the parser missed, please get in contact with us and we will get it added.
                <br>
                Please double check your RPT, it's always wise to check for errors manually. We are not responsible or liable for anything.
            </small></p>
            <p>To start, click on the button below to select your RPT. There are no size restrictions and all the processing is done locally</p>
            <form>
                <div class="uk-form-controls">
                    <label><input class="uk-checkbox" type="checkbox" v-model="removeDuplicates"> Remove Duplicates</label>
                </div>
                <div class="uk-form-controls">
                    <label><input class="uk-checkbox" type="checkbox" v-model="showExplaination"> Show Explaination <span class="uk-label">BETA</span></label>
                </div>
                <div class="uk-form-controls uk-margin-top">
                    <div class="js-upload" uk-form-custom>
                        <input type="file" accept=".rpt" id="uploader" @change="updateFileName">
                        <button class="uk-button esm-button" type="button">Select RPT</button>
                    </div>
                    <button class="uk-button esm-button-confirm" type="button" @click="start" id="btnParse">Parse RPT</button>
                </div>
            </form>
            <small id="file-name"></small>
            <div class="uk-position-center" v-if="errors.length === 0 && processing">
                <div class="sk-folding-cube">
                    <div class="sk-cube1 sk-cube"></div>
                    <div class="sk-cube2 sk-cube"></div>
                    <div class="sk-cube4 sk-cube"></div>
                    <div class="sk-cube3 sk-cube"></div>
                </div>
            </div>
            <div class="uk-margin-top uk-grid-match uk-child-width-1-2" uk-grid>
                <div v-if="errors.length > 0" v-for="(error, index) of errors">
                    <div class="uk-card-small uk-card-error">
                        <div class="uk-card-header">
                            <h3>Error #{{index + 1}}<small> Line {{error.rptLine}}</small></h3>
                        </div>
                        <div class="uk-card-body">
                            <form class="uk-form-stacked">
                                <div v-if="error.code !== ''">
                                    <label class="uk-form-label">Code: </label>
                                    <div class="uk-form-controls">
                                        <p><code v-html="error.code"></code></p>
                                    </div>
                                </div>
                                <div v-if="error.info !== ''">
                                    <label class="uk-form-label">Info: </label>
                                    <div class="uk-form-controls">
                                        <p v-html="error.info"></p>
                                    </div>
                                </div>
                                <div v-if="error.reason !== ''">
                                    <label class="uk-form-label">Reason: </label>
                                    <div class="uk-form-controls">
                                        <p v-html="error.reason"></p>
                                    </div>
                                </div>
                                <div v-if="error.explaination !== ''">
                                    <label class="uk-form-label">Explaination: </label>
                                    <div class="uk-form-controls">
                                        <p v-html="error.explaination"></p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>