{% extends 'bench/base.html' %}
{% block content %}
    <div class="card" >
        <div class="header">
            <h2>Repos</h2>
            <ul class="header-dropdown m-r-0">
                <li>
                    <button data-toggle="modal" data-target="#repoform" class="btn bg-purple waves-effect"><i id="template-role" class="material-icons">{{ template_role }}</i></button>
                </li>
            </ul>
        </div>
        <div class="body">
            {% for repo in repos %}
            <ul class="font-15" ><a href="{% url 'repo_update' repo.id %}">{{ repo.name }}</a></ul>
            {% endfor %}
        </div>
    </div>
    <div id="repoform" class="modal fade in" role="dialog" tabindex="-1">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                <div class="modal-header"></div>
                <div class="modal-body">
                <form role="form" method="post" action="">{% csrf_token %}
                    {{ form }}
                    <div class=input-field" style="margin:30px 20px">
                    <button  type="submit" value="Login">Submit</button>
                    </div>
                </form>
                </div>
                <div class="modal-footer"></div>
             </div>
         </div>
    </div>
    <script>
        $(window).on('load',function(){
            if($('#template-role').text() == "edit")
            {
                console.log("hello");
                $('#repoform').modal('show');
            }
    });
    </script>
{% endblock %}