// open modal
function create_modal(title, content, footer) {
    let div = document.createElement('div');
    div.innerHTML = `<div id="modal">
        <div id="content">
            <div>
                <div id="modal_header">
                    <h3 id="modal_title">${title || "&nbsp"}</h3>
                    <span><i class="material-icon" onclick="remove_modal();">close</i></span>
                </div>
                <div class="divider"></div>
            </div>
            <div id="modal_content">
                ${content}
            </div>
            <div>
                <div class="divider"></div>
                <div id="modal_footer">
                    ${footer || "&nbsp"}
                </div>
            </div>
        </div>
    </div>`;
    document.body.appendChild(div.firstChild);
}


// remove modal
function remove_modal() {
    document.getElementById('modal').remove();
}

// change content
function change_modal_content(content) {
    document.getElementById("modal_content").innerHTML = content;
}