<button onclick="show_upload_popup()" class="btn" id="upload_btn">Nahrát</button>

<div id="upload_popup">
    <div>Název: <input type="text" name="name" minlength="4" maxlength="16"></div>
    <div>Popis: <input type="text" name="desc" maxlength="192"></div>

    <div><label for="file_upload" class="btn">Zvolte Soubor</label></div>
    <div><input type="file" name="file_upload" id="file_upload" style="display:none;"></div>
    <div><button onclick="upload()" type="submit" class="btn" id="upload_popup_sub">Zveřejnit</button></div>
</div>
<div id="image_popup">
    <img src="//:0">
</div>
<div id="posts"></div>

<script>
    $.ajax
    ({
        url: "./res/forum/api/get_posts.php",
        success: function(result)
        {
            for (let i in result)
            {
                $("#posts").append
                (
                    "<div class=\"post\">" +
                        "<div class=\"post_image\">" +
                            "<img src=\"" + "http://109.123.243.163/user_content/" + result[i].author + "/" + result[i].photo_id + "\"></img>" +
                        "</div>" +

                        "<div class=\"post_info\">" +
                            "<div>Název: <span class=\"post_name\">" + result[i].title + "</span></div>" +
                            "<div>Autor: " + result[i].username + "</div>" +
                            ((result[i].description != null) ? "<div class=\"post_desc\">Popis: <div class=\"post_desc_text\">" + result[i].description + "</div></div>" : "") +
                        "</div>" +
                    "</div>"
                );
            }
        }
    });

    function show_upload_popup()
    {
        if ($("#upload_popup").css("display") == "flex")
        {
            $("#upload_popup").css("display", "none");
        } else
        {
            $("#upload_popup").css("display", "flex");
        }
    }

    function upload()
    {
        let formData = new FormData();

        formData.append('file_upload', $('#file_upload')[0].files[0]);
        if ($('input[name="name"]').val().trim() != "") formData.append('name', $('input[name="name"]').val());
        if ($('input[name="desc"]').val().trim() != "") formData.append('desc', $('input[name="desc"]').val());

        $.ajax
        ({
            url : './res/forum/api/upload_picture.php',
            type : 'POST',
            data : formData,
            processData: false,
            contentType: false,
            success : function(result)
            {
                switch (result.status)
                {
                    case 0:
                        show("home");
                        break;

                    case 1:
                        alert("Nebyl nahrán soubor!\nToto může znamenat že se snažíte nahrát soubor větší než 50MB!");
                        break;

                    case 2:
                        alert("Nebyl vyplněn název příspěvku!");
                        break;

                    case 3:
                        alert("Neplatný formát!");
                        break;

                    case 4:
                        alert("Příliš velký obrázek!\nMaximální velikost je 5MB!");
                        break;
                }
            }
        });
    }

    $(document).on("click", ".post_image", function(event)
    {
        $("#image_popup").css("display", "flex");
        $("#image_popup").children("img").attr("src", $(this).children("img").attr("src"));
        $("#image_popup").children("img").attr("alt", $(this).parent(".post").children(".post_info").children("div").children(".post_name").html());
    });
</script>