edit_base.html

{% extends "layout.html" %}
{% load editable_package %}
{% load sstatic %}

{% block title %}Edit {{object.package_noun}} "{{form.instance.name}}" - {{block.super}}{% endblock title %}

{% block content_container %}container-fluid{% endblock %}

{% block body_classes %}{{block.super}} editable-package{% endblock %}

{% block stylesheets %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% sstatic 'css/editable_package.css' %}"/>
{% endblock stylesheets %}

{% block content %}
<div class="page-header">
    <a class="back" href="{% package_url 'list_profile' request.user.pk %}">Back to {{object.package_noun}}s</a>
    <h1 class="name-header">
        Edit {{object.package_noun}} <em>"{{form.instance.name}}"</em>
    </h1>
</div>

<div class="sidebar">
    <p class="help-block">
        <a class="helplink text-info" target="numbasquickhelp" href="{{HELP_URL}}{{object.package_noun}}s/index.html"><span class="glyphicon glyphicon-question-sign"></span> Help with writing {{object.package_noun}}s</a>
    </p>
    <div class="panel panel-default">
        <ul class="list-group">
            {% if editable %}
            <a class="list-group-item{% if options_active %} active{% endif %}" href="{% package_url 'edit' object.pk %}"><span class="glyphicon glyphicon-cog"></span> Options</a>
            {% endif %}
            {% if request.user == object.author %}
            <a class="list-group-item{% if access_active %} active{% endif %}" href="{% package_url 'access' object.pk %}"><span class="glyphicon glyphicon-user"></span> Access</a>
            {% endif %}
        </ul>
        {% if object.editable %}
        <div class="panel-heading">Files</div>
        <ul class="list-group">
            {% if parent_directory != current_directory %}
            <div class="list-group-item parent-directories">
                <nav>
                    <ol class="breadcrumb">
                        {% for parent in current_directory.parents reversed %}
                        <li><a class="parent-directory monospace" href="?filename={{parent}}">{% if parent.name != '' %}{{parent.name}}{% else %}{{object.name}}{% endif %}</a></li>
                        {% endfor %}
                        <li><span class="monospace">{{current_directory.name}}</span></li>
                    </ol>
                </nav>
            </div>
            {% endif %}
            {% for absfname, relfname, is_dir in filenames %}
            <a class="list-group-item monospace{% if absfname == filename %} active{% endif %}{% if is_dir %} dir{% endif %}" href="{% package_url 'edit_source' object.pk %}?filename={{absfname}}">{{relfname}}</a>
            {% endfor %}

            {% if editable %}
            <li class="list-group-item">
                <form method="GET" action="{% package_url 'edit_source' object.pk %}" class="form-inline">
                    <label>
                        <span class="glyphicon glyphicon-plus"></span>
                        Write a new file: 
                        <div class="input-group">
                            <input class="form-control" name="filename">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" title="Add a file"><span class="glyphicon glyphicon-plus"></span></button>
                            </span>
                        </div>
                    </label>
                </form>
            </li>
            {% if object.package_noun == 'theme' %}
            <li class="list-group-item">
                <form method="GET" action="{% package_url 'edit_source' object.pk %}" class="form-inline">
                    <label>
                        <span class="glyphicon glyphicon-pencil"></span>
                        Change a file from the default theme:
                        <div class="input-group">
                            <select name="filename" class="form-control">
                                <option></option>
                                {% for file in default_files %}
                                <option value="{{file}}">{{file}}</option>
                                {% endfor %}
                            </select>
                            <input type="hidden" name="load_from_default" value="true">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" title="Change this file"><span class="glyphicon glyphicon-pencil"></span></button>
                            </span>
                        </div>
                    </label>
                </form>
            </li>
            {% endif %}
            <li class="list-group-item">
                <button id="upload" class="btn btn-primary btn-block" type="submit" data-toggle="modal" data-target="#upload-file-modal">
                    <span class="glyphicon glyphicon-upload"></span>
                    Upload a new file
                </button>
            </li>
            {% endif %}
        </ul>
        {% else %}
        <div class="panel-body">
            This {{object.package_noun}}'s source code is not editable.
        </div>
        {% endif %}
    </div>
</div>

<div class="edit-content">
    {% block package_edit_content %}{% endblock %}
</div>
{% endblock content %}

{% block modals %}
    {{ block.super }}
    <div class="modal fade" tabindex="-1" role="dialog" id="upload-file-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Upload a file</h4>
                </div>
                <div class="modal-body">
                    <form action="{% package_url 'replace_file' object.pk %}" method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="form-group">
                            <label>
                                <span class="glyphicon glyphicon-upload"></span>
                                Upload a file
                            </label>
                            {{upload_file_form.content}}
                        </div>
                        <button class="btn btn-primary" type="submit">
                            <span class="glyphicon glyphicon-upload"></span>
                            Upload
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock modals %}

{% block javascripts %}
    {{block.super}}

    <script src="{% sstatic 'js/editable_package/edit_base.js' %}"></script>
{% endblock %}