{% set title = 'Write' %}

{% extends 'layouts/default.html' %}

{% block content %}
{% with messages = get_flashed_messages() %}
{% if messages %}
<div>
    {% for message in messages %}
    <p class="bg-info">{{message}}</p>
    {% endfor %}
</div>
{% endif %}
{% endwith %}


<form action="{{url_postback}}" method="POST" class="ft-write-form" id="ft-write-form">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
            <div class="form-group">
                <textarea name="page_text" class="form-control" placeholder="Post contents..." rows="20">{{page_text}}</textarea>
            </div>
        </div>
    </div>

    <input type="hidden" name="is_dos_nl" value="{{is_dos_nl}}" />

    <div class="row">
        <div class="col-sm-6 col-sm-offset-1">
            <a class="btn btn-info" href="{{url_preview}}">Preview</a>
            <a class="btn btn-danger" href="{{url_cancel}}">Cancel</a>
        </div>
        <div class="col-sm-2">
            <div class="btn-group pull-right">
                <button type="submit" name="do_save" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><button type="button" class="btn btn-link" data-toggle="modal" data-target="#ft-commit-modal">Save and Commit</button></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-2">
            <input type="checkbox" class="form-check-input" value="" name="do_publish" id="ft-publish-toggle"/>
            <label class="form-check-label" for="ft-publish-toggle">Publish</label>
        </div>
    </div>

    <div id="ft-commit-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="ft-commit-modal-label">
        <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" id="ft-commit-modal-label">Commit Page</h4>
                </div>
                <div class="modal-body">
                    <p>This will commit the current page to your source control.</p>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon" id="ft-commit-msg-label">Message: </span>
                            <input type="text" class="form-control" placeholder="{{commit_msg}}" aria-describedby="ft-commit-msg-label" name="commit_msg" id="ft-commit-msg" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" name="do_save_and_commit">Save and Commit</button>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="row">
    <div class="col-sm-10 col-sm-offset-1">
        <h3>Assets</h3>
        <p>Here are the assets you can use on this page with the <code>{%raw%}{{assets.foo}}{%endraw%}</code> syntax.</p>
        {% if assets %}
        <ul>
        {% for a in assets %}
            <li><a href="{{a.url}}">{{a.name}}</a></li>
        {% endfor %}
        </ul>
        {% else %}
        <p>...no assets...</p>
        {% endif %}
    </div>
</div>

<form action="{{url_upload_asset}}" method="POST" enctype="multipart/form-data" class="ft-upload-form" id="ft-upload-form">
    <div class="row">
        <div class="col-lg-6 col-sm-offset-1">
            <p>Upload a new asset:</p>
            <div class="form-group">
                <div class="input-group">
                    <input name="ft-asset-file" type="file"/>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon" id="ft-label-asset-name">Name</span>
                    <input name="ft-asset-name" type="text" class="form-control" placeholder="Optional asset name" aria-describedby="ft-label-asset-name"/>
                </div>
            </div>
            <div class="form-group">
                <input type="submit" value="Upload!" />
            </div>
        </div>
    </div>
</form>
{% endblock %}