Html file reformat with curly brackets

Hey,

I have this code:

{% extends "layout.html" %}
{% block content %}
    {% for post in posts %}
    <h1> {{post['title']}}</h1>
    {% endfor %}
{% endblock content %}

But when I copy this to another file or try to use ctrl+shift+L it does not reformat good but takes all to the left.
How can I make a reformat template for this?

Thanks!

P.S
Should I used webstorm or Phpstorm? What is the difference?