symfony 3.4 pass variable to a modal in twig

Question

I need help to solve my problem. I have a page with my list of "equipos". Every "equipo" in the table has an Edit buttom, and the page show another buttom to add new "equipos".

So far I manage to call a modal for NEW using the {{ render() }} syntax, the equipoNewModal works fine because is an "static" route (/equipo/new) in Symfony; but the EDIT don't work because I can't pass the "equipo" variable to the equipoEditModal and get the id to complete the route (/equipo/{id}/edit) and call the controller.

Symfony can't render the page and return an error: Variable "equipo" does not exist.

The controller isn't the problem, if I create an tag with href={{ path('edit_equipo', {'id': equipo.id}) }} in the list.html.twig template and skip the modal I can edit every equipo. To dismiss the controller, if I hardcoded the line:

{{ form_start(equipoForm, {'action': path('edit_equipo', {'id': equipo.id})}) }}

in the edit.html.twig to:

 {{ form_start(equipoForm, {'action': path('edit_equipo', {'id': 1})}) }}

the edit action works, of course for every equipo the edit action call the edition of the item with id=1 in the database, but it say that the controller works fine.

I'm missing something and hope the community find the solution... sorry my english.

==============

list.html.twig

<table id="datatable-buttoms" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>EQUIPOS</th>
        </tr>
    </thead>
    <tbody>
            {% for equipo in equipos %}
                <tr>
                    <td>{{ equipo.id }}</td>
                    <td>{{ equipo.equipo }}</td>
                    <td>{{ equipo.nomenclador }}</td>
                    <td>{{ equipo.nomenclador.especialidad }}</td>
                    <td>
                    <button type="button" class="btn btn-primary" href="" data-toggle="modal" data-target="#equipoEditModal">
                        Editar
                    </button>
                    <button type="button" class="btn btn-danger" href="" data-toggle="modal" data-target="#equipoDeleteModal">
                        Eliminar
                    </button>
                </td>
            </tr>
           {{ render(controller('AppBundle:Equipo:edit', {'id': equipo.id})) }}
        {% endfor %}
    </tbody>
</table>

<button type="button" class="btn btn-primary" href="" data-toggle="modal" data-target="#equipoNewModal">
    Agregar
</button>
{{ render(controller('AppBundle:Equipo:new')) }}

=============

new.html.twig

<div class="modal fade" id="equipoNewModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">NUEVO</h4>
            </div>
            <div class="modal-body">
                {{ form_start(equipoForm, {'action': path('new_equipo')}) }}
                {{ form_widget(equipoForm) }}
                <button type="submit" class="btn btn-primary">Guardar</button>
                {{ form_end(equipoForm) }}
            </div>
        </div>
    </div>
</div>

==============

edit.html.twig

<div class="modal fade" id="equipoEditModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">EDITAR</h4>
            </div>
                <div class="modal-body">
                    {{ form_start(equipoForm, {'action': path('edit_equipo', {'id': equipo.id})}) }}
                        {{ form_widget(equipoForm) }}
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    {{ form_end(equipoForm) }}
                </div>
        </div>
    </div>
</div>

===============

Edit Controller

    /**
     * @Route("/equipo/{id}/edit", name="edit_equipo")
     */
    public function editAction(Request $request, Equipo $equipo)
    {
        $form = $this->createForm(EquipoFormType::class, $equipo);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $equipo = $form->getData();

            $em = $this->getDoctrine()->getManager();
            $em->persist($equipo);
            $em->flush();

            return $this->redirectToRoute('list_equipos');
        }

        return $this->render('sysreport/equipos/edit.html.twig', [
            'equipoForm' => $form->createView(),
        ]);
    }

EDIT:

To solve the problem only add the line that @Nobady says in the editAction controller...

To call every modal depending of the equipo change data-target in the list.html.twig file:

<button type="button" class="btn btn-primary" href="" data-toggle="modal" data-target="#equipo{{ equipo.id }}">

and of course in the edit.html.twig file too:

<div class="modal fade" id="equipo{{ equipo.id }}">

Answer 1

to solve then you have to pass equipo as parameter, like this in Edit Controller:

/**
 * @Route("/equipo/{id}/edit", name="edit_equipo")
 */
public function editAction(Request $request, Equipo $equipo)
{
    $form = $this->createForm(EquipoFormType::class, $equipo);
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        $equipo = $form->getData();

        $em = $this->getDoctrine()->getManager();
        $em->persist($equipo);
        $em->flush();

        return $this->redirectToRoute('list_equipos');
    }

    return $this->render('sysreport/equipos/edit.html.twig', [
        'equipoForm' => $form->createView(),
        'equipo' => $equipo
    ]);
}