$(document).ready(function (){
    renderContent()
})

function getInfoAboutUser (){
    let user_type = ''
    if (screen.width <= 800){
        user_type = 'mobile'
    } else if (screen.width > 1024) {
        user_type = 'desktop'
    } else if (screen.width >= 800 && screen.width <= 1024) {
        user_type = 'laptop'
    }
    return [user_type,screen.width]
}

function sendWidthAjax () {
    let width = getInfoAboutUser()[1]
    let data = {
        'screen_width': width
    }
    return data
}

function renderContent () {
    let data = sendWidthAjax()
    let section_button = document.querySelector(".section_btn")
    data['section_url'] = section_button.dataset['url']
    $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: '/get_content_for_section/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        // contentType: false,
        enctype: 'json',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        success: function(data){
            document.querySelector(".content").innerHTML = data.html
        },
        error: function (data){
            alert(data)
        }
    });
}