<!DOCTYPE html>
<html lang="en">
<head>
    <%- include ('../partials/head') -%>
    <script type="text/javascript" src="/src/js/addProject.js"></script>
    <link rel="stylesheet" type="text/css" href="/src/css/generalStyle.css">
</head>
<body>

<header>
    <%- include ('../partials/loggedUserHeader') -%>
</header>

<main>
  <div class="container">
    <div class="card mb-3">
      <div class="card-header">
        <%= strings['afegir']['compartir_projecte'][lang] %>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-2"></div>
          <div class="col-md-8">
            <div id="alertAddProj"></div>
            <form id="addProjectForm" action="/afegirEntrada" method="POST">
              <div class="form-group">
                <div class="row">
                  <div class="col">
                    <label for="inputTittle" class="col col-form-label"><%= strings['afegir']['nom_projecte'][lang] %></label>
                    <div class="col">
                      <input type="Text" class="form-control" id="inputTittle" name="title" maxlength="50" required>
                    </div>
                  </div>
                  <div class="col">
                    <label for="inputLink" class="col col-form-label"><%= strings['afegir']['enllaç_git'][lang] %></label>
                    <div class="col">
                      <input type="url" class="form-control" id="inputLinkGit" name="link" maxlength="100" required>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="mb-2">
                  <label for="inputDescSmall" class="col col-form-label d-inline"><%= strings['afegir']['descripcio_curta'][lang] %></label>
                  <div class="d-inline myPop" data-container="body" data-toggle="popover" data-placement="right" data-content="<%= strings['afegir']['explicacio_descSmall'][lang] %>">
                    <svg class="bi bi-info-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                      <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
                      <circle cx="8" cy="4.5" r="1"/>
                    </svg>
                  </div>
                </div>
                <div class="col">
                  <textarea type="text" rows="3" class="form-control" id="inputDescSmall" name="descSmall" maxlength="500" required></textarea>
                </div>
              </div>
              <div class="form-group">
                <div class="mb-2">
                  <label for="inputDescBig" class="col col-form-label d-inline"><%= strings['afegir']['descripcio_llarga'][lang] %> (<small><%- strings['afegir']['use_mark'][lang] %></small>)</label>
                  <div class="d-inline myPop" data-container="body" data-toggle="popover" data-placement="right" data-content="<%= strings['afegir']['explicacio_descBig'][lang] %>">
                    <svg class="bi bi-info-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                      <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
                      <circle cx="8" cy="4.5" r="1"/>
                    </svg>
                  </div>
                </div>
                <div class="col">
                  <textarea id="inputDescBig" rows="10" class="form-control" name="descBig" maxlength="10000000" required></textarea>
                </div>
              </div>
              <div class="form-group">
                <label for="inputLink" class="col col-form-label"><%= strings['afegir']['enllaç_web'][lang] %></label>
                <div class="col">
                  <input type="url" class="form-control" id="inputLinkWeb" name="linkWeb" maxlength="100">
                </div>
              </div>
              <div class="form-group">
                <div class="mb-2">
                  <label for="inputLink" class="col col-form-label d-inline"><%= strings['afegir']['tags'][lang] %></label>
                  <div class="d-inline myPop" data-container="body" data-toggle="popover" data-placement="right" data-content="<%= strings['afegir']['explicacio_tags'][lang] %>">
                    <svg class="bi bi-info-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                      <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
                      <circle cx="8" cy="4.5" r="1"/>
                    </svg>
                  </div>
                </div>
                <div class="col">
                  <input type="text" class="form-control" id="tags" name="tags" placeholder="this,is an,example" maxlength="3000" required>
                </div>
              </div>
              <div class="form-group">
                <div class="row">
                  <div class="col-auto mr-auto">
                    <button type="submit" class="btn btn-success"><%= strings['afegir']['afegir_proj'][lang] %></button>
                  </div>
                  <div class="col-auto">
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#previModal">
                      <%= strings['afegir']['previsualitza'][lang] %>
                    </button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="previModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel"><%= strings['afegir']['previsualitzacio'][lang] %></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="card">
            <div class="card-header" id="preTitle"></div>
            <div class="card-body" id="preBody"></div>
            <div class="card-footer" id="preFooter"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
        </div>
      </div>
    </div>
  </div>
</main>
<%- include ('../partials/footer_2') -%>
</body>
</html>
