<% layout('layouts/base')%>

<main class="backdrop">
    <div class="container">
        <h1 class="text-secondary">Projects</h1>
        <p class="subhead-text">Projects are a great way to get involved with Mines ACM!
            Apply knowledge from classes and learn new skills with our variety of projects.</p>

        <% if (typeof user == 'object' && user && user.is_admin) { %>
            <button type="button" class="d-inline-block btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#new-project-modal">
                New
            </button>
        <% } %>

        <div class="mt-4 scroll">
            <% for(let project of projects) { %>
                <div class="large-card shadow mb-4">
                    <div class="row align-items-center gx-3 gy-3">
                        <% if(project.image_id) { %>
                            <div class="col-lg-3 text-center">
                                <img src="uploads/<%= project.image_id %>" class="project-image" />
                            </div>
                        <% } %>
                        
                        <div class="col-lg">
                            <h3 class="large-card-title">
                                <%= project.title %>
                                <% if (project.archived) { %>
                                    <span class="large-card-sidetitle">(Inactive)</span>
                                <% } %>
                            </h3>
                            <p class="large-card-subtitle"><%= project.description %></p>
                            <div class="mt-1">                        
                                <% if(project.website) { %>
                                    <a class="d-block d-inline" href="<%= project.website %>">Website</a>
                                <% } %>
                                <a class="d-block"  href="<%= project.repository %>">Repository</a>
                            </div>
                            <% if (project.authors.length > 0) { %>
                                <div class="row row-cols-auto justify-content-start mx-0 mt-1 gx-1 gy-1">
                                    <% for (author of project.authors) { %>
                                        <div class="col">
                                            <a href="/profile/<%= author.id %>">
                                                <div class="chip">
                                                    <% if (author.avatar_id) { %>
                                                        <img src="uploads/<%= author.avatar_id %>" class="d-inline project-author-picture" />
                                                    <% } else { %>
                                                        <img src="static/images/default_user.png" class="d-inline project-author-picture" />
                                                    <% } %>
                                                    <p class="d-inline project-author-name ms-1"><%= author.name %></p>
                                                </div>
                                            </a>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>
                            <% if (typeof user == 'object' && user && user.is_admin) { %>
                                <div class="row row-cols-auto align-items-start mx-0 mt-1 gx-1 gy-1">
                                    <div class="col">
                                        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit-project-<%= project.id %>-modal">
                                            Edit
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#delete-project-<%= project.id %>-modal">
                                            Delete
                                        </button>
                                    </div>
                                </div>
                            <% } %>
                        </div>
                    </div>
                </div>
            <% } %> 
        </div>
    </div>    
</main>

<% if (typeof user === 'object' && user && user.is_admin) { %>
    <div class="modal fade" id="new-project-modal" tabindex="-1" aria-labelledby="new-project-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="new-project-modal-label">New Project</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form class="project-form" data-project-authors-id="new-project-authors" method="POST" action="/projects" enctype="multipart/form-data" >
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label" for="new-project-title">Title</label>
                            <input id="new-project-title" class="form-control" name="title" type="text" required placeholder="A Cool Project" />
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label" for="new-project-description">Description</label>
                            <input id="new-project-description" class="form-control" name="description" type="text" required placeholder="A meaningful description..." />
                        </div>
     
                        <div class="mb-3">
                            <label class="form-label" for="new-project-repository">Repository Link</label>
                            <input id="new-project-repository" class="form-control" name="repository" type="url" required placeholder="https://github.com/Example/CoolProject" />
                        </div>
     
                        <div class="mb-3">
                            <label class="form-label" for="new-project-website">Website Link (Optional)</label>
                            <input id="new-project-website" class="form-control" name="website" type="url" placeholder="https://example.com" />
                        </div>

                        <div id="new-project-authors" data-project-authors-value="<%= JSON.stringify(['']) %>"></div>

                        <div class="form-check mb-3">
                            <label class="form-check-label" for="new-project-archived">Archived</label>
                            <input id="new-project-archived" class="form-check-input" name="archived" type="checkbox" />
                        </div>
     
                        <div>
                            <label class="form-label" for="new-project-image">Image</label>
                            <input id="new-project-image" class="form-control" name="image" type="file" accept="image/png,image/jpg,image/jpeg" required />
                            <p class="form-text">Images must be under 5 MB and of JPG/JPEG/PNG type.</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Discard</button>
                        <button type="submit" class="btn btn-success">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
        
    <% for (let project of projects) { %>
        <div class="modal fade" id="edit-project-<%= project.id %>-modal" tabindex="-1" aria-labelledby="edit-project-<%= project.id %>-modal-label" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="edit-project-<%= project.id %>-modal-label">Edit Project</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form class="project-form" data-project-authors-id="edit-project-<%= project.id %>-authors" method="POST" action="/projects/edit" enctype="multipart/form-data" >
                        <div class="modal-body">
                            <input type="hidden" name="project_id" value="<%= project.id %>">

                            <div class="mb-3">
                                <label class="form-label" for="edit-project-<%= project.id %>-title">Title</label>
                                <input id="edit-project-<%= project.id %>-title" class="form-control" name="title" type="text" required value="<%= project.title %>" placeholder="A Cool Project" />
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label" for="edit-project-<%= project.id %>-description">Description</label>
                                <input id="edit-project-<%= project.id %>-description" class="form-control" name="description" type="text" required value="<%= project.description %>" placeholder="A meaningful description..." />
                            </div>
         
                            <div class="mb-3">
                                <label class="form-label" for="edit-project-<%= project.id %>-repository">Repository Link</label>
                                <input id="edit-project-<%= project.id %>-repository" class="form-control" name="repository" type="url" required value="<%= project.repository %>" placeholder="https://github.com/Example/CoolProject" />
                            </div>
         
                            <div class="mb-3">
                                <label class="form-label" for="edit-project-<%= project.id %>-website">Website Link (Optional)</label>
                                <input id="edit-project-<%= project.id %>-website" class="form-control" name="website" type="url" value="<%= project.website %>" placeholder="https://example.com" />
                            </div>

                            <div id="edit-project-<%= project.id %>-authors" data-project-authors-value="<%= JSON.stringify(project.authors.map((a) => a.id)) %>"></div>

                            <div class="form-check mb-3">
                                <label class="form-check-label" for="archived">Archived</label>
                                <% if (project.archived) { %>
                                    <input id="archived" name="archived" class="form-check-input" type="checkbox" checked>
                                <% } else { %>
                                    <input id="archived" name="archived" class="form-check-input" type="checkbox">
                                <% } %>
                            </div>
         
                            <div>
                                <label class="form-label" for="edit-project-<%= project.id %>-image">Image</label>
                                <input id="edit-project-<%= project.id %>-image" name="image" class="form-control" type="file" accept="image/png,image/jpg,image/jpeg" />
                                <p class="form-text">Images must be under 5 MB and of JPG/JPEG/PNG type.</p>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Discard</button>
                            <button type="submit" class="btn btn-success">Save</button>
                        </div>
                    </form>
                </div>
            </div>      
        </div>
        
        <div class="modal fade" id="delete-project-<%= project.id %>-modal" tabindex="-1" aria-labelledby="delete-project-<%= project.id %>-modal-label" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="delete-project-<%= project.id %>-modal-label">Delete Project</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" action="/projects/delete">
                        <div class="modal-body">
                            <input type="hidden" name="project_id" value="<%= project.id %>">
                            <p>Are you sure you want to delete the <strong><%= project.title %></strong> project?</p>
                        </div>
                        <div class="modal-footer">
                            <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-danger">Delete</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    <% } %>
<% } %>

<script src="/scripts/projects.js"></script>
