Sindbad~EG File Manager

  <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item p-2">
            <button type="button" class="nav-link active " value="1" aria-selected="true">Step 1</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="2" onclick="{% if data.cur_step >= 1 %}jump_step(2){% endif %}">Step 2</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="3" onclick="{% if data.cur_step >= 2 %}jump_step(3){% endif %}">Step 3</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="4" onclick="{% if data.cur_step >= 3 %}jump_step(4){% endif %}">Step 4</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="5" onclick="{% if data.cur_step >= 4 %}jump_step(5){% endif %}">Step 5</button>
        </li>
    </ul>

<div class="container">
    <form method="POST" action="{{url_for('main.Step1post',abs_id=abs_id,abs_type=abs_type,conf_id=conf_id,conf_key=conf_key)}}" id="form_s1">
        
            <div class="row">
                <div class="col">
                    <div><label class="font-weight-bold" class="font-weight-bold">Orator's Membership Number</label></div>
                    <br />
                    <div>{{user_info.membership_no or 'Non Member'}}<input type="hidden" name="member_id" id="member_id" value="{{ member_id or '' }}" /></div>
                    <br />
                </div>
                <div class="col">
                    <div><label class="font-weight-bold">Orator's Name</label></div>
                    <br />
                <div>{{user_info.full_name or ''}}<input type="hidden" name="name" id="name" value="{{ name or ''}}" /></div>
                    <br />
                </div>
            </div>
            <div class="row">
                <div class="col ">
                    <label class="font-weight-bold">Title of Oration (not exceeding 200 characters):<span class="text-danger">*</span></label>
                    <span id="chars" class="text-primary ml-2"></span>
                </div>
            </div>
            <div class="row ">
                <div class="col text-center">
                    <textarea name="title" id="title" class="form-control" placeholder="Title of the Paper" value="">{{data.title or ''}}</textarea>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col py-2">
                            <div><label class="font-weight-bold">Choose your oration:<span class="text-danger">*</span></label></div>
                        </div>
                        <br />
                     </div>
                    <div class="row">
                        <div class="col">
                            <div>
                                <select class="form-control categories" id="cat_type" name="cat_type">
                                    <option value="" id="select">--Select--</option>
                                    {% if categories %} 
                                    {% for item in categories %} 
                                    {% if data.category_id == item.category_id %}
                                    <option value="{{item.category_id}}" selected> {{item.name or ''}} </option>
                                    {% else %}
                                    <option value="{{item.category_id}}"> {{item.name or ''}} </option>
                                    {% endif %} 
                                    {% endfor %} 
                                    {% endif %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col float-right py-2">
                    <input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(1,1)" />
                </div>
            </div>
       <br>
        <div id="step2"></div>
       <!-- <input type="hidden" name="user_id" id="user_id" value="{{user_id}}" /> -->
        <input type="hidden" name="abs_id" id="abs_id" value="{{abs_id}}" />
        <input type="hidden" name="de_abs_id" id="de_abs_id" value="{{Cryptography.decrypt(abs_id)}}" />
        <input type="hidden" name="abs_type" id="abs_type" value="{{abs_type}}">
        <input type="hidden" name="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}">
        <input type="hidden" name="step" id="step" value="1">
        <input type="hidden" name="step" id="is_next" value="1">
        
    </form>
</div>
<!-- The Modal -->
{% block script %}
<script type="text/javascript">
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
var abs_type = $("#abs_type").val();
var $title = $("#title");
var $chars = $("#chars");
var x200 = 200;
$chars.html (x200  + " characters remaining");
$title.on("keyup", countChar);
countChar();
function countChar() {
            var textLength = $title.val().length;
            var textRemaining = x200 - textLength;
            if (textRemaining < 0) {
                $chars.attr("class", "text-danger ml-2");
                var textRemaining1 = -textRemaining;
                $chars.html(textRemaining + " characters exceeded");
            } else {
                $chars.attr("class", "text-primary ml-2");
                $chars.html(textRemaining + " characters remaining");
            }
        }
    </script>
{% endblock %}