{% extends "sysadmin/base.html" %}
{% load i18n seahub_tags %}

{% block cur_tc %}tab-cur{% endblock %}

{% block right_panel %}
<div class="hd ovhd">
    <h3 class="fleft">{% trans "Terms and Conditions" %}</h3>
    <button id="add-btn" class="btn-white fright">{% trans "Add" %}</button>
</div>

{% if object_list %}
<table>
    <thead>
    <tr>
        <th width="15%">{% trans "Name" %}</th>
        <th width="10%">{% trans "Version" %}</th>
        <th width="35%">{% trans "Text" %}</th>
        <th width="15%">{% trans "Created" %}</th>
        <th width="15%">{% trans "Activated" %}</th>
        <th width="10%"><!--Operations--></th>
    </tr>
    </thead>
    <tbody>
    {% for tc in object_list %}
    <tr>
        <td>{{ tc.name }}</td>
        <td>{{ tc.version_number }}</td>
        <td><a href="#" class="js-text" data-msg="{{ tc.text }}">{{ tc.text|truncatechars:50 }}</a></td>
        <td>{{ tc.date_created|translate_seahub_time }}</td>
        <td>
            {% if tc.date_active %}
            {{ tc.date_active|translate_seahub_time }}
            {% else %}
            --
            {% endif %}
        </td>
        <td>
            <a href="#" class="js-update op-icon sf2-icon-edit2 vh" data-pk="{{ tc.pk}}" data-name="{{ tc.name }}" data-version="{{ tc.version_number }}" data-text="{{ tc.text }}" data-activated="{% if tc.date_active %}1{% else %}0{% endif %}" title="{% trans "Update" %}"></a>
            <a href="#" class="remove-btn op-icon sf2-icon-delete vh" data-url="{% url "sys_delete_terms" tc.pk %}" data-target="{{ tc.name }}" title="{% trans "Delete" %}"></a>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>

{% else %}
<p>{% trans "Empty" %}</p>
{% endif %}

<form id="tc-form" action="" method="post" class="hide">{% csrf_token %}
    <h3>{% trans "Add Terms and Conditions" %}</h3>
    <input type="hidden" name="pk" value="" />

    <label for="id_name">{% trans "Name" %}</label><br />
    <input type="text" name="name" id="id_name" class="input" /><br />

    <label for="id_version_number">{% trans "Version Number" %}</label><br />
    <input type="text" name="version_number" id="id_version_number" class="input" /><br />

    <label for="id_text">{% trans "Text" %}</label><br />
    <textarea name="text" id="id_text" class="textarea" style="width:800px;"></textarea><br />

    <label for="id_status">{% trans "Activated" %}</label><br />
    <input type="radio" name="status" value="1" checked="checked" class="vam">
    <span class="vam">{% trans "On" %}</span><br />
    <input type="radio" name="status" value="0" class="vam">
    <span class="vam">{% trans "Off" %}</span><br />
    
    <p class="error hide"></p>
    <button type="submit" class="submit">{% trans "Submit" %}</button>
</form>

<div id="tc-preview" class="article hide"></div>

{% endblock %}

{% block extra_script %}
<script type="text/javascript" src="{{MEDIA_URL}}js/editormd/lib/marked.min.js"></script>
<script type="text/javascript">
$('#add-btn').on('click', function() {
    $('#tc-form').modal();
    $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
});

$('#tc-form').on('submit', function(){
    var $form = $(this),
        form_id = $form.attr('id'),
        $submit_btn = $form.find('[type="submit"]'),
        pk = $('[name="pk"]', $form).val(),
        name = $.trim($('[name="name"]', $form).val()),
        version = $.trim($('[name="version_number"]', $form).val()),
        text = $.trim($('[name="text"]', $form).val()),
        activated = $('[name="status"]:checked', $form).val();

    disable($submit_btn);
    $.ajax({
        url: '{% url 'sys_terms_admin' %}',
        type: 'POST',
        datatype: 'json',
        cache: false,
        beforeSend: prepareCSRFToken,
        data: {
            'name': name,
            'version_number': version,
            'text': text,
            'status': activated,
            'pk': pk
        },
        success: function(data) {
            location.reload(true);
        },
        error: function(xhr, textStatus, errorThrown) {
            var error_msg = prepareAjaxErrorMsg(xhr);
            apply_form_error(form_id, error_msg)
            enable($submit_btn);
        }
    });

    return false;
});

$('.js-update').on('click', function() {
    var $form = $('#tc-form');
    $form.modal({focus: false});
    $('#simplemodal-container').css({'width':'auto', 'height':'auto'});

    $('h3', $form).html("{% trans "Update Terms and Conditions" %}");
    $('[name="pk"]', $form).val($(this).attr('data-pk'));
    $('[name="name"]', $form).val($(this).attr('data-name'));
    $('[name="version_number"]', $form).val($(this).attr('data-version'));
    $('[name="text"]', $form).val($(this).attr('data-text'));
    $('[name="status"][value="' + $(this).attr('data-activated') + '"]', $form).prop('checked', true);

    return false;
});

addConfirmTo($('.remove-btn'), {
    'title': "Delete T&C",
    'con':"{% trans "Are you sure you want to delete %s ?" %}",
    'post': true // post request
});

var renderer = new marked.Renderer();
// remove 'id' attribute for headings
renderer.heading = function (text, level) {
    return '<h' + level + '>' + text + '</h' + level + '>';
};
marked.setOptions({
    renderer: renderer,
    breaks: true, // keep linebreak
    smartLists: true,
    sanitize: true // Ignore any HTML that has been input
});

$('.js-text').on('click', function() {
    $('#tc-preview')
    .html(marked($(this).attr('data-msg')))
    .css({'max-height': $(window).height() - 120}) // 120: the vertical paddings of #tc-preview & the popup
    .modal();

    return false;
});
 
</script>
{% endblock %}
