{% extends 'base.html' %}
     {% block title %}IvoryOS | New devices{% endblock %}

     {% block body %}
     <div class="row">
         <!-- Available Python API -->
         <div class="col-xl-4 col-lg-4 col-md-6 mb-4">
             <div class="card shadow-sm mb-4">
                 <div class="card-header">
                     <h5 class="mb-0">Available Python API</h5>
                 </div>
                 <div class="card-body">
                     {% for instrument in api_variables %}
                         <div class="card mb-2">
                             <div class="card-body p-2">
                                 <a href="{{ url_for('control.temp.new_controller', instrument=instrument) }}" class="text-dark stretched-link">{{ instrument }}</a>
                             </div>
                         </div>
                     {% endfor %}
                     <div class="card mt-3">
                         <div class="card-body p-2">
                             <a data-bs-toggle="modal" href="#importAPI" class="stretched-link">
                                 <i class="bi bi-folder-plus"></i> Import API
                             </a>
                         </div>
                     </div>
                 </div>
             </div>
         </div>

         <!-- Connecting Device -->
         <div class="col-xl-5 col-lg-5 col-md-6 mb-4">
             {% if device %}
{#                 {{ device }}#}
             <div class="card shadow-sm mb-4">
                 <div class="card-header">
                     <h5 class="mb-0">Connecting</h5>
                 </div>
                 <div class="card-body">
                     <form role="form" method="POST" name="init" action="{{ url_for('control.temp.new_controller', instrument=instrument) }}">
                         <div class="mb-3">
                             <label class="form-label" for="device_name">Name this device</label>
                             <input class="form-control" type="text" id="device_name" name="device_name" aria-describedby="nameHelpBlock" placeholder="e.g. {{device.__name__}}_1">
                             <div id="nameHelpBlock" class="form-text">
                                 Name your instrument, avoid names that are defined on the right
                             </div>
                         </div>
                         {% for arg in device.__init__.__annotations__ %}
                             {% if not arg == "return" %}
                                 <div class="mb-3">
                                     <label class="form-label" for="{{arg}}">{{arg}}</label>
                                     <input class="form-control" type="text" id="{{arg}}" name="{{arg}}"
                                         placeholder="{{device.__init__.__annotations__[arg].__name__}}"
                                         value="{{args.parameters[arg].default if not args.parameters[arg].default.__name__ == '_empty' else ''}}">
                                     {% if device.__init__.__annotations__[arg].__module__ is not in ["builtins", "typing"] %}
                                         <a role="button" href="{{ url_for('control.temp.new_controller', instrument=device.__init__.__annotations__[arg].__name__) }}" class="btn btn-secondary btn-sm mt-2">Initialize {{device.__init__.__annotations__[arg].__name__}} first</a>
                                     {% endif %}
                                 </div>
                             {% endif %}
                         {% endfor %}
                         <button type="submit" class="btn btn-dark">Connect</button>
                     </form>
                 </div>
             </div>
             {% endif %}
         </div>

         <!-- Defined Instruments -->
         <div class="col-xl-3 col-lg-3 col-md-6 mb-4">
             <div class="card shadow-sm mb-4">
                 <div class="card-header">
                     <h5 class="mb-0">Defined Instruments</h5>
                 </div>
                 <div class="card-body">
                     {% if defined_variables %}
                         <ul class="list-group">
                             {% for instrument in defined_variables %}
                                 <li class="list-group-item">{{ instrument }}</li>
                             {% endfor %}
                         </ul>
                     {% else %}
                         <span class="text-muted">No instruments defined.</span>
                     {% endif %}
                 </div>
             </div>
         </div>
     </div>

     <!-- Import API Modal -->
     <div class="modal fade" id="importAPI" tabindex="-1" aria-labelledby="importModal" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <h1 class="modal-title fs-5" id="importModal">Import API by file path</h1>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <form method="POST" action="{{ url_for('control.temp.import_api') }}" enctype="multipart/form-data">
                     <div class="modal-body">
                         <div class="mb-3">
                             <label class="form-label" for="filepath">File Path:</label>
                             <input type="text" class="form-control" name="filepath" id="filepath">
                         </div>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                         <button type="submit" class="btn btn-primary">Save</button>
                     </div>
                 </form>
             </div>
         </div>
     </div>
     {% endblock %}