<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pratham Images</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/ico" href="images/logo.png" />
    
    <link rel="stylesheet" href="https:/maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https:/cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/adminlte.min.css">
    <link rel="stylesheet" href="css/stylesheet.css">
    
    <script src="https:/ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https:/cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https:/maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="js/adminlte.min.js"></script>
    <script src="js/dataFile.js"></script>
    <script src="js/devScript.js"></script>
</head>
<body style="background-image: url(images/plainbackground.png)">
    <header class="main-header bg-white col-12 m-0" style="top:0;position:fixed;background-image:url(images/topbanner.png);background-attachment: fixed;background-size: 100%;background-repeat: no-repeat;">
        <div class="row" style="display: flex;align-items: center;justify-content: space-between;">
            <a class="navbar-brand" href="index.html">
                <img src="images/logo.png" alt="logo" style="width:50px;">
                <span style="color: darkgreen;">
                   <b>Pratham Images</b> 
                </span>
            </a>
        </div>
    </header>
    <!-- <div class="row justify-content-center p-2">
        <div style="font-family: math;font-size: 4vw;text-shadow: 5px 1px #e9dede;">
            <b><i>Resource</i></b>
        </div>
    </div> -->
    <div class='row align-items-center justify-content-around p-4' style="margin-top: 10vh;">
        <div class="col-8  d-flex align-items-center mt-4 text-center" style="height:70vh">
            <img class="img-responsive offset-1 card rounded p-0" style="max-width: 100%;max-height: 100%;width: auto;vertical-align: middle;object-fit: contain;" 
            style="box-shadow: 2px 3px 5px;border: 3px dotted gray;" src='images/404.png'/>
        </div>
        <button class="col-1 form-control btn-outline-primary w-25 my-3 p-0" style="position: fixed;top:12vh;right:1vw;">
            <a class="downloadBtn" href="{% url 'image_repoportal:download_resource' id %}">Download</a>
        </button>
        <!-- <div class="col-5 card mt-4 p-4 shadow-lg border-dark" style="height:70vh">
            <h3>Tags : 
                <button id="edit_keywords" class="btn-outline-primary form-control w-25 my-3 p-0" onclick="edit_keywords();">
                    <span>Edit <i class="far fa-edit"></i></span>
                </button>
                <button id="save_keywords" class="btn-outline-primary form-control w-25 my-3 p-0" onclick="save_keywords_clicked();">
                    <span>Save <i class="far fa-save"></i></span>
                </button>
            </h3>
            <h5 name = "current_keywords" style="height:20vh;overflow-y:auto;" class="keywords">{{keyword}}</h5>
            <h5 name = "edit_current_keywords" style="height:20vh;overflow-y:auto;display:none"></h5>
            
            <button class="btn-outline-primary form-control w-25 my-3 p-0" data-toggle="collapse" data-target="#moreTags">Add more tags</button>
            <div id='moreTags' class="collapse" action="">
                <label for=""> Add More Tags (comma separated):</label>
                <input id = "search_link" type="hidden" value="{% url 'image_repoportal:search'%}{{id}}">
                <input type="text" class="form-control w-75" placeholder="Add Tags..." onkeyup="createTag(this)">
                <div id='tags' class='row mt-3'></div>
                <button class="form-control col-2 btn-outline-primary my-3" onclick="send_keywords()">Add</button>
            </div>
            <button class="form-control btn-outline-primary w-25 my-3 p-0">
                <a class="downloadBtn" href="{% url 'image_repoportal:download_resource' id %}">Download</a>
            </button>
        </div> -->
    </div>
</body>
<script>
    $(document).ready(function(){
        $('#edit_keywords').prop('style','display:inline-block;');
        $('#save_keywords').prop('style','display:none;');
        
        $('[data-toggle="tooltip"]').tooltip({ trigger: "hover" });
        showKeywords();
    })

    function saysomething(){
        console.log('Inside say something!');

    }
</script>
</html>